@charset "UTF-8";
/********************************      SCSS變數:START      ********************************/
/********************************      SCSS變數:END      ********************************/
/********************************     SCSS/Font Awesome:START     ********************************/
/********************************     SCSS/Font Awesome:END     ********************************/
/********************************     SCSS排版樣式:START     ********************************/
/********************************     SCSS排版樣式:END     ********************************/
/********************************     SCSS邊框樣式:START     ********************************/
/********************************     SCSS邊框樣式:END     ********************************/
/********************************     SCSS圖片樣式:START     ********************************/
/********************************     SCSS圖片樣式:END     ********************************/
/********************************     SCSS轉場效果:START     ********************************/
/********************************     SCSS轉場效果:END     ********************************/
/********************************      SCSS特效: START      ********************************/
@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
/********************************      SCSS特效: END      ********************************/
/********************************      Reset default setting:START      ********************************/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: top;
}

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, session,
blockquote, ol, ul, li, fieldset, form, input, textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

img {
  display: inline-block;
  line-height: 0;
  vertical-align: bottom;
}

ol, ul {
  list-style: none;
}

i {
  font-style: normal;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
}

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

blockquote, q {
  quotes: "" "";
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

input, button {
  margin: 0;
}

a {
  text-decoration: none;
}

html, body {
  height: 100%;
  min-height: 100%;
}

/* 清除浮動層, 方式1: 設定class="clearfix" */
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  overflow: visible;
}

/* 清除浮動層, 方式2: 加<div class="clearfix" /> */
.clear {
  border: none;
  clear: both;
  height: 0px;
  margin: 0;
  padding: 0;
  width: 0;
}

/********************************      Reset default setting:END      ********************************/
/********************************      Bootstrap:START      ********************************/
.table {
  margin-bottom: initial;
}

.table th, .table td {
  padding: initial;
  vertical-align: top;
  border-top: none;
}

.row {
  margin-right: -8px;
  margin-left: -8px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto,
.col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto,
.col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-right: 8px;
  padding-left: 8px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

@media only screen and (max-width: 768px) {
  .row {
    margin-right: -6px;
    margin-left: -6px;
  }
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto,
  .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
  .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto,
  .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 6px;
    padding-left: 6px;
  }
}
.form-control:focus {
  border-color: transparent;
  box-shadow: none;
}

/********************************      Bootstrap:END      ********************************/
/********************************      Placeholder:START      ********************************/
::-moz-placeholder { /* Most modern browsers support this now. */
  font-weight: 200;
}
::placeholder { /* Most modern browsers support this now. */
  font-weight: 200;
}

::-webkit-input-placeholder { /* WebKit/Safari/Chrome/Opera */
  font-weight: 200;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-weight: 200;
  opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-weight: 200;
  opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-weight: 200;
}

::-ms-input-placeholder { /* Microsoft Edge */
  font-weight: 200;
}

/********************************      Placeholder:END      ********************************/
/********************************      共用變數:START      ********************************/
:root {
  --color-main: #08b;
  --color-secondary: #006677;
  --background-color_disabled: #ececec;
  --background-color_readonly: #f8f8f8;
  --color-green: #27c24c;
  --color-red: #ee3939;
  --color-blue: #0088cc;
  --color-yellow: #ddb411;
  --color-orange: #d66600;
  --color-black: #000;
  --color-gray: #adadad;
  --color-white: #fff;
  --transparent: transparent;
  --color-facebook: #305891;
  --color-twitter: #2ca8d2;
  --color-weibo: #f5ca59;
  --color-line: #1dbf21;
  --color-weixin: #82d44a;
  --color-linkedin: #0077b5;
  --color-youtube: #ff0000;
  --color-instagram: #3897f0;
  --color-phone: #989898;
  --color-comment: #adadad;
  --font-family: "HanHei TC", "PingFang TC", "Noto Sans TC", "Helvetica Neue", "Helvetica", "STHeitiTC-Light", "Arial", "sans-serif", "微軟正黑體", "微软雅黑", "FontAwesome";
  --font-color: #2b2b2b;
  --font-color-black: #000;
  --font-color-white: #fff;
  --font-color-title: #3b3b3b;
  --font-color-subtitle: #4b4b4b;
  --font-color_disabled: #898989;
  --font-color-link: #14202b;
  --font-color-link_hover: #337ab7;
  --font-color-link_disabled: #337ab7;
  --font-color-hint: #78909c;
  --font-size-base: 14px;
  --font-size-small: 0.9rem;
  --font-size-smaller: 0.8rem;
  --font-size-least: 0.7rem;
  --font-size-large: 1.2rem;
  --font-size-larger: 1.4rem;
  --font-size-largest: 1.6rem;
  --font-size-title: 1.1rem;
  --font-size-h1: 2.4rem;
  --font-size-h2: 2.2rem;
  --font-size-h3: 1.8rem;
  --font-size-h4: 1.6rem;
  --font-size-h5: 1.5rem;
  --font-size-h6: 1.3rem;
  --font-weight-base: 500;
  --font-weight-light: 400;
  --font-weight-thin: 300;
  --font-weight-bold: 600;
  --font-weight-heavy: 800;
  --line-height-base: 1.48;
  --line-height-large: 2.4rem;
  --line-height-larger: 3rem;
  /** 圖示大小 **/
  --icon-size-base: 14px;
  --icon-size-small: 12px;
  --icon-size-smaller: 8px;
  --icon-size-large: 24px;
  --icon-size-largest: 36px;
  --icon-size-input: 16px;
  --icon-size-tip: 16px;
  --border-color-dark: 1px solid rgba(0,0,0,0.2);
  --border-color-light: 1px solid rgba(0,0,0,0.1);
  --border-color-translucent: 1px solid rgba(255, 255,255, 0.1);
  --margin-page: 48px;
  --margin-layout: 24px;
  --margin-webkit: 12px;
  --padding-page: 48px;
  --padding-layout: 24px;
  --padding-webkit: 12px;
  --padding-gutter: 3px;
  --padding-widget: 6px;
  --padding-list-head: 3px;
  --padding-list-head_tb: 3px;
  --padding-list-head_lr: 6px;
  --padding-list-item: 6px;
  --padding-list-item_tb: 6px;
  --padding-list-item_lr: 6px;
  --padding-list-foot_tb: 8px;
  --padding-list-foot_lr: 4px;
  --height-layout-title: 42px;
  --height-layout-bottom: 48px;
  --height-widget: 36px;
  --border-color-widget: var(--border-color-dark);
  --border-color-widget_focus: 0;
  --border-radius-widget: 2px;
}

/* 手機版:START */
@media only screen and (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --line-height-base: 1.48;
    /** 圖示大小 **/
    --icon-size-base: 14px;
    --icon-size-small: 12px;
    --icon-size-smaller: 8px;
    --icon-size-large: 24px;
    --icon-size-largest: 36px;
    --icon-size-input: 16px;
    --icon-size-tip: 16px;
    --margin-page: 32px;
    --margin-layout: 18px;
    --margin-webkit: 8px;
    --padding-page: 32px;
    --padding-layout: 18px;
    --padding-webkit: 8px;
    --padding-gutter: 3px;
    --padding-widget: 6px;
    --padding-list-head: 3px;
    --padding-list-head_tb: 3px;
    --padding-list-head_lr: 6px;
    --padding-list-item: 6px;
    --padding-list-item_tb: 6px;
    --padding-list-item_lr: 6px;
    --padding-list-foot_tb: 8px;
    --padding-list-foot_lr: 4px;
  }
}
/* 手機版:END */
/* 平版:START */
/* 平版:END */
/* 電腦版:START */
/* 電腦版:END */
/* 高解析電腦版:START */
/* 高解析電腦版:END */
/********************************      共用變數:END      ********************************/
/********************************      自定義樣式: START      ********************************/
/** slash:START (加斜線"/") **/
.slash:before {
  content: "/";
  padding: 0 var(--padding-gutter);
}

/** slash:END **/
/** dash:START (破折號"-") **/
.dash:before {
  content: "-";
  padding: 0 var(--padding-gutter);
}

/** hyphen:END **/
/** bracket(括號, 手機版顯示):START **/
.bracket {
  font-size: 0.8em;
}

.bracket:before {
  content: "(";
}

.bracket:after {
  content: ")";
}

.green {
  color: var(--color-green);
}

.red {
  color: var(--color-red);
}

.blue {
  color: var(--color-blue);
}

.yellow {
  color: var(--color-yellow);
}

.orange {
  color: var(--color-orange);
}

.black {
  color: var(--color-black);
}

.gray {
  color: var(--color-gray);
}

.white {
  color: var(--color-white);
}

@media (max-width: 768px) {
  .UIDataColumn .bracket {
    display: block;
    white-space: nowrap;
  }
}
/** bracket:END **/
/** 數量符號:START **/
.symbolQty:before {
  content: " x";
}

/** 數量符號:END **/
/** 頓號:START **/
.comma:before {
  content: "、";
}

/** 頓號:END **/
/** block:START(區塊換行) **/
.block {
  display: block;
  width: 100%;
}

/** block:END **/
/********************************      自定義樣式: END      ********************************/
/********************************     常用樣式定義(7個顯示一組, 第一個為大圖):START     ********************************/
.grid-7 > .UIGroup {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  float: left;
  width: 19%;
  padding: 0 10px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .grid-7 > .UIGroup {
    width: 50%;
  }
}

.grid-7 > .UIGroup:first-child {
  width: 43%;
}
@media (max-width: 1200px) {
  .grid-7 > .UIGroup:first-child {
    width: 100%;
  }
}

/********************************     常用樣式定義(7個顯示一組, 第一個為大圖):START     ********************************/
/********************************     messageCenter: START     ********************************/
.messageCenter {
  --background-color-message-center: #fff;
  --background-color-message-center_dark: #000;
  --padding-message-center: var(--padding-layout);
}

.messageCenter {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  background-color: var(--background-color-message-center);
  padding: var(--padding-message-center);
}

/** Dark mode:START **/
.messageCenter.dark {
  background-color: var(--background-color-message-center_dark);
}

.messageCenter.dark .messageBox {
  background-color: #fff;
}

/** Dark mode:END **/
/** messageCenter/messageBox: START **/
.messageCenter .messageBox {
  --border-message-center-box: var(--border-color-dark);
  --background-color-message-center-box-icon: #f00032;
  --color-message-center-box-icon: #fff;
  --font-color--message-center-box-tip: #a4a4a7;
  --font-size--message-center-box-caption: var(--font-size-larger);
  --font-size--message-center-box-tip: var(--font-size-smaller);
  --padding-message-center-box-icon: var(--padding-page) auto;
  --padding--message-center-box-caption: 0 0 var(--padding-layout) 0;
  --padding--message-center-box-content: 0 0 var(--padding-layout) 0;
  --padding--message-center-box-tip: 0 0 var(--padding-layout) 0;
  --width-message-center-box: 320px;
  --height-message-center-box: 420px;
}

.messageCenter .messageBox {
  border: var(--border-message-center-box);
  width: var(--width-message-center-box);
  min-height: var(--height-message-center-box);
  position: relative;
}

.messageCenter .messageBox > .icon {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: var(--background-color-message-center-box-icon);
  width: 56px;
  height: 56px;
  margin: var(--padding-message-center-box-icon);
}

.messageCenter .messageBox > .icon i {
  color: var(--color-message-center-box-icon);
  font-size: 32px;
}

.messageCenter .messageBox > .UIGroup.message > .caption {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  font-size: var(--font-size--message-center-box-caption);
  padding: var(--padding--message-center-box-caption);
}

.messageCenter .messageBox > .UIGroup.message > .content {
  text-align: center;
  padding: var(--padding--message-center-box-content);
}

.messageCenter .messageBox > .tip {
  color: var(--font-color--message-center-box-tip);
  font-size: var(--font-size--message-center-box-tip);
  text-align: center;
  width: 100%;
  padding: var(--padding--message-center-box-tip);
  position: absolute;
  bottom: 0;
}

/** messageCenter/messageBox: END **/
/** messageCenter/addToHomeBox: START **/
.messageCenter .addToHomeBox {
  --background-color-message-center-box-bottom: #eee;
  --font-size--message-center-box-message: var(--font-size-large);
  --padding-message-center-box-icon: var(--padding-page) auto;
  --padding-message-center-box-label: var(--padding-layout) 0;
  --padding-message-center-box-message: var(--padding-layout) 0;
  --padding-message-center-box-bottom: 24px;
  --padding-message-center-box-bottom-image: 0 6px;
  --width-message-center-box-bottom: 320px;
}

.messageCenter .addToHomeBox {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
}

.messageCenter .addToHomeBox .logo {
  text-align: center;
  margin: var(--padding-message-center-box-icon);
}

.messageCenter .addToHomeBox .logo > .UIImage {
  height: 64px;
}

.messageCenter .addToHomeBox .logo > .UILabel {
  display: block;
  text-align: center;
  padding: var(--padding-message-center-box-label);
}

.messageCenter .addToHomeBox .message {
  display: block;
  font-size: var(--font-size--message-center-box-message);
  padding-bottom: var(--padding-message-center-box-message);
}

.messageCenter .addToHomeBox .bottom {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  background-color: var(--background-color-message-center-box-bottom);
  width: var(--width-message-center-box-bottom);
  padding: var(--padding-message-center-box-bottom);
  position: fixed;
  bottom: 24px;
  left: 50%;
  margin-left: -160px;
}

.messageCenter .addToHomeBox .bottom:before {
  content: "";
  position: absolute;
  bottom: -12px;
  margin: -10px 0 0 -10px;
  display: block;
  left: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  z-index: 997;
  border-top: 12px solid #eee;
}

.messageCenter .addToHomeBox .bottom .UIImage {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  width: 24px;
  margin: var(--padding-message-center-box-bottom-image);
}

/** messageCenter/addToHomeBox: END **/
/********************************     messageCenter: END     ********************************/
/********************************      元件組合樣式定義:START(之後不要用)      ********************************/
/** 元件容器標題 **/
/** 元件容器標題底線 **/
/** 元件容器內容 **/
/********************************      元件組合樣式定義:END      ********************************/
/********************************      WebKit/common:tooltip:START      ********************************/
/* tooltip:START */
.tip {
  position: relative;
}

.tip:hover {
  cursor: pointer;
}

.tip:hover:before,
.tip:hover:after {
  display: initial;
}

.tip:before {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #000;
  color: #fff;
  padding: 0.2em 0.5em;
  white-space: pre;
  margin-left: 14px;
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 0px;
  z-index: 9999;
}

.tip:after {
  border-width: 8px;
  border-style: solid;
  border-color: transparent #000 transparent transparent;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  z-index: 9999;
}

.tip:before,
.tip:after {
  opacity: 0.8;
  display: none;
  transition: opacity 0.3s ease-out;
}

/* tooltip:END */
.UIFormItem > th.tip:after,
.UILabel.tip:after,
.UILinkButton.tip:after,
.UILink.tip:after,
.UIButton.tip:after {
  top: 5px;
  right: -14px;
}

.UILabel.tip,
.UILink.tip {
  display: inline-block;
}

.UIPanel > .top > .caption > .tip > i {
  padding-left: 6px;
}

/********************************      WebKit/common:tooltip:END      ********************************/
/********************************      WebKit/app:UIApp:START      ********************************/
.UIApp, .UIPage {
  --font-size-app_fs4: 12px;
  --font-size-app_fs6: 16px;
  --font-size-app_fs7: 18px;
  --font-size-app_fs8: 20px;
}

.UIApp, .UIPage {
  color: var(--font-color);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  /** 字型大小定義 **/
  /** RWD Support **/
}
.UIApp a, .UIPage a {
  color: var(--font-color-link);
  text-decoration: none;
}
.UIApp a:hover, .UIPage a:hover {
  color: var(--font-color-link_hover);
  text-decoration: none;
}
.UIApp a:disabled, .UIPage a:disabled {
  cursor: default;
}
.UIApp .fs4, .UIPage .fs4 {
  font-size: var(--font-size-app_fs4);
}
.UIApp .fs6, .UIPage .fs6 {
  font-size: var(--font-size-app_fs6);
}
.UIApp .fs7, .UIPage .fs7 {
  font-size: var(--font-size-app_fs7);
}
.UIApp .fs8, .UIPage .fs8 {
  font-size: var(--font-size-app_fs8);
}
@media (max-width: 768px) {
  .UIApp .hiddenXs, .UIPage .hiddenXs {
    display: none !important;
  }
  .UIApp .hidden:not(.showXs), .UIPage .hidden:not(.showXs) {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .UIApp .hiddenSm, .UIPage .hiddenSm {
    display: none !important;
  }
  .UIApp .hidden:not(.showSm), .UIPage .hidden:not(.showSm) {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .UIApp .hiddenMd, .UIPage .hiddenMd {
    display: none !important;
  }
  .UIApp .hidden:not(.showMd), .UIPage .hidden:not(.showMd) {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .UIApp .hiddenLg, .UIPage .hiddenLg {
    display: none !important;
  }
  .UIApp .hidden:not(.showLg), .UIPage .hidden:not(.showLg) {
    display: none !important;
  }
}

/* mac系統 */
.UIApp.mac.retina,
.UIApp.mac.retina input,
.UIApp.mac.retina select {
  font-weight: var(--font-weight-light);
}

/* windows系統 */
.UIApp.windows,
.UIApp.windows input,
.UIApp.windows select {
  font-weight: var(--font-weight-bold);
}

/* HD/Retina */
/********************************      WebKit/app:UIApp:END      ********************************/
/********************************      WebKit/app:UIAlert:START      ********************************/
.UIAlert {
  --background-color-alert-header: rgba(0, 0, 0, 0.2);
  --background-color-alert-info: #b8c9d1;
  --background-color-alert-error: #c84346;
  --background-color-alert-confirm: #fff;
  --background-color-alert-confirm-header: #67a4c0;
  --border-radius-alert: 0px;
  --border-radius-alert-button: 3px;
  --font-color-alert-light: #fff;
  --font-color-alert-dark: #000;
  --width-min-alert-button: 80px;
  --height-min-alert-body: 80px;
  --padding-alert-body: 1.2rem;
}

.UIAlert {
  z-index: 99999 !important;
}

.UIAlert .toast {
  border-radius: var(--border-radius-alert);
  -moz-border-radius: var(--border-radius-alert);
  -webkit-border-radius: var(--border-radius-alert);
  font-size: 1rem;
}

.UIAlert .toast .toast-header {
  border-top-left-radius: var(--border-radius-alert);
  -webkit-border-top-left-radius: var(--border-radius-alert);
  -moz-border-top-left-radius: var(--border-radius-alert);
  border-top-right-radius: var(--border-radius-alert);
  -webkit-border-top-right-radius: var(--border-radius-alert);
  -moz-border-top-right-radius: var(--border-radius-alert);
  font-size: 1rem;
}

.UIAlert .toast .toast-footer {
  text-align: center;
}

.UIAlert .toast .toast-body {
  padding: var(--padding-alert-body);
  min-height: var(--height-min-alert-body);
}

.UIAlert .toast .toast-footer .UIButton {
  border-radius: var(--border-radius-alert-button);
  -moz-border-radius: var(--border-radius-alert-button);
  -webkit-border-radius: var(--border-radius-alert-button);
  min-width: var(--width-min-alert-button);
}

.UIAlert.Info .toast,
.UIAlert.Error .toast {
  color: var(--font-color-alert-light);
}

.UIAlert.Info .toast .toast-header,
.UIAlert.Error .toast .toast-header {
  background-color: var(--background-color-alert-header);
  color: var(--font-color-alert-light);
}

.UIAlert.Info .toast {
  background-color: var(--background-color-alert-info);
}

.UIAlert.Error .toast {
  background-color: var(--background-color-alert-error);
}

.UIAlert.Confirm .toast {
  background-color: var(--background-color-alert-confirm);
  color: var(--font-color-alert-dark);
}

.UIAlert.Confirm .toast .toast-header {
  background-color: var(--background-color-alert-confirm-header);
  color: var(--font-color-alert-light);
}

#UIAlertMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}

/********************************      WebKit/app:UIAlert:END      ********************************/
/********************************      WebKit/app:UIPage:START      ********************************/
.UIPage.print {
  --background-color-page: #cdcdcd;
  --background-color-page-document: #fff;
  --border-page-document: 1px #D3D3D3 solid;
}

.UIPage.print {
  background-color: var(--background-color-page);
  margin: 0;
  padding: 0;
}

.UIPage.print .document {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-page-document);
  border: var(--border-page-document);
  position: relative;
  width: 21cm;
  min-height: 29.7cm;
  padding: 1.2cm 2cm;
  margin: 1cm auto;
}

/* Preview:START */
.UIPage.print .document .preview {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #cdcdcd;
  font-size: var(--font-size-base);
  width: 100%;
  height: 32px;
  text-align: center;
  position: absolute;
  top: -36px;
  left: 0;
}

.UIPage.print .document .preview .UILabel {
  line-height: 32px;
}

.UIPage.print .document .preview .UIButton {
  height: 32px;
  padding: 0 38px;
  position: absolute;
  right: 0;
}

/* Preview:END */
/* UIForm:START */
.UIPage.print .UIForm > table > tbody > tr > th {
  padding: initial;
}

.UIPage.print .UIForm > table > tbody > tr > td {
  padding: calc(var(--padding-webkit) / 4) calc(var(--padding-webkit) / 3);
}

/* UIForm:END */
/* UIDataTable:START */
.UIPage.print .UIDataTable > table > thead > tr > th,
.UIPage.print .UIPaginatedDataTable > table > thead > tr > th {
  border-bottom: 1px solid #000;
}

.UIPage.print .UIDataTable > table > tbody > tr.contrast:nth-child(odd),
.UIPage.print .UIPaginatedDataTable > table > tbody > tr.contrast:nth-child(odd) {
  background-color: #fff;
}

.UIPage.print .UIDataTable > table > tbody > tr > td,
.UIPage.print .UIPaginatedDataTable > table > tbody > tr > td {
  padding: calc(var(--padding-webkit) / 2) calc(var(--padding-webkit) / 3);
}

/* UIDataTable:END */
/********************************      WebKit/app:UIPage:END      ********************************/
/********************************      WebKit/app:UIPrint:START      ********************************/
/** SIZE:STANDARD(A4):START **/
.UIPrint {
  font-size: 12px;
  padding: 38px 32px;
  height: initial;
}

.UIPrint .UIForm > table > tbody > tr > th > span {
  line-height: initial;
}

.UIPrint .UIForm > table > tbody > tr > th {
  padding: 2px 4px;
}

.UIPrint .UIForm > table > tbody > tr > td {
  padding: 2px 4px;
}

.UIPrint .UIDataTable table > tbody > tr > td, .UIPrint .UIPaginatedDataTable > table > tbody > tr > td {
  padding: 2px 4px;
}

.UIPrint .UIDataTable table > tbody > tr > td > .UIImage, .UIPrint .UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
  margin-top: -2px;
  margin-bottom: -2px;
}

.UIPrint #header .companyName {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
}

.UIPrint #header .name {
  font-size: 1.3rem;
  text-align: center;
  border-bottom: 1px solid #000;
}

.UIPrint #header #print_header {
  position: relative;
  min-height: 52px;
}

.UIPrint #header #print_header .qrcode {
  position: absolute;
  top: 12px;
  left: 0px;
}

.UIPrint #header #print_header .barcode {
  position: absolute;
  top: 24px;
  right: 12px;
}

.UIPrint #body .dataHeader {
  border-bottom: 1px solid #000;
  margin-bottom: 12px;
}

.UIPrint #body .dataBody {
  border-bottom: 1px solid #000;
  margin-bottom: 12px;
}

.UIPrint #body .dataFooter {
  display: flex;
  justify-content: flex-end;
}

/** SIZE:STANDARD:END **/
/** SIZE:HALF:START **/
.UIPrint {
  padding: 22px 26px 12px 26px;
}

.UIPrint.HALF #header .companyName {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
}

.UIPrint.HALF #header .name {
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid #000;
}

.UIPrint.HALF #header #print_header .qrcode {
  position: absolute;
  top: 12px;
  left: 0px;
}

.UIPrint.HALF #header #print_header .barcode {
  display: none;
}

/** SIZE:HALF:END **/
/** PAGE:START **/
.UIPrint .page {
  -moz-column-break-after: page;
       break-after: page;
}

/** PAGE:END **/
/** NOTICE:START **/
.UIPrint .notice {
  padding-top: 12px;
}

.UIPrint .notice .qrcode {
  padding-top: 12px;
}

/** NOTICE:END **/
/** SIZE:CUSTOM:START **/
/** SIZE:CUSTOM:END **/
@media print {
  body, input, textarea, button, legend, select {
    font-family: var(--font-family);
    font-weight: 500 !important;
  }
  body {
    background-color: #fafafa;
    margin: 0;
    padding: 0;
  }
  * {
    color: #000 !important;
  }
  /* 設定列印不會出現網址 */
  a[href]:after {
    content: none !important;
  }
  .page {
    page-break-inside: avoid; /* 使元素不會於換頁時中斷*/
    page-break-after: always; /* 碰到該元素時換頁 */
    /* min-height: 100vh;*/
  }
  .page::after {
    content: counter(page-number);
    counter-increment: page-number 1;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    font-size: 8px;
    text-align: center;
  }
  /* 修正列印時, 採用電腦版方式 */
  .container {
    width: 1170px;
  }
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .UIHorizontalLayout tr td {
    vertical-align: top;
  }
}
/********************************      WebKit/app:UIPrint:END      ********************************/
/********************************      WebKit/app:UIPwa:START      ********************************/
.UIPwa > .btnAddToHome {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font-size: var(--font-size-large);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 65px;
}

/********************************      WebKit/app:UIPwa:END      ********************************/
/*******************************      WebKit/layout:UIActionForm:START   ********************************/
.UIActionForm {
  display: none;
}

/*******************************      WebKit/layout:UIActionForm:END   ********************************/
/********************************      WebKit/layout:UIDataTable/UIPaginatedDataTable:START      ********************************/
.UIDataTable, .UIPaginatedDataTable {
  --background-color-datatable-group-head: #eee;
  --background-color-datatable-item_odd: #fafbfc;
  --background-color-datatable-item_hover: #ceecf5;
  --border-datatable-head-group: 1px solid #fff;
  --border-datatable-head: var(--border-color-light);
  --border-datatable-item: var(--border-color-light);
  --border-radius-datatable-item: var(--border-radius-widget);
  --color-datatable-button-group: var(--color-main);
  --font-color-datatable-head: var(--font-color-subtitle);
  --font-size-datatable-head: var(--font-size-small);
  --font-size-datatable-footer: var(--font-size-small);
  --font-weight-datatable-footer: var(--font-weight-heavy);
  --padding-datatable-head_tb: var(--padding-list-head_tb);
  --padding-datatable-head_lr: var(--padding-list-head_lr);
  --padding-datatable-item_tb: var(--padding-list-item_tb);
  --padding-datatable-item_lr: var(--padding-list-item_lr);
  --padding-datatable-foot_first: var(--padding-webkit);
  --size-datatable-image: 46px;
}

.UIDataTable #message,
.UIPaginatedDataTable #message,
.UIPaginatedRepeater #message,
.UIPaginatedGridLayout #message {
  --font-color-datatable-message: var(--font-color-hint);
  --padding-datatable-message_tb: var(--padding-list-foot_tb);
  --padding-datatable-message_lr: var(--padding-list-foot_lr);
}

.UIDataTable,
.UIPaginatedDataTable {
  overflow-x: auto;
  border-collapse: collapse;
}

.UIDataTable table,
.UIPaginatedDataTable > table {
  table-layout: auto;
}

.UIDataTable table > tbody > tr > td.left,
.UIDataTable table > thead > tr > th.left,
.UIDataTable table > tfoot > tr > td.left,
.UIPaginatedDataTable > table > tbody > tr > td.left,
.UIPaginatedDataTable table > thead > tr > th.left,
.UIPaginatedDataTable > table > tfoot > tr > td.left {
  text-align: left;
}

.UIDataTable table > tbody > tr > td.center,
.UIDataTable table > thead > tr > th.center,
.UIDataTable table > tfoot > tr > td.center,
.UIPaginatedDataTable > table > tbody > tr > td.center,
.UIPaginatedDataTable table > thead > tr > th.center,
.UIPaginatedDataTable > table > tfoot > tr > td.centercenter {
  text-align: center;
}

.UIDataTable table > tbody > tr > td.right,
.UIDataTable table > thead > tr > th.right,
.UIDataTable table > tfoot > tr > td.right,
.UIPaginatedDataTable > table > tbody > tr > td.right,
.UIPaginatedDataTable table > thead > tr > th.right,
.UIPaginatedDataTable > table > tfoot > tr > td.right {
  text-align: right;
}

/* tbody:START */
.UIDataTable table > tbody > tr > td,
.UIPaginatedDataTable > table > tbody > tr > td {
  border-bottom: var(--border-datatable-item);
  vertical-align: middle;
  padding: var(--padding-datatable-item_tb) var(--padding-datatable-item_tb);
}
@media only screen and (min-width: 992px) {
  .UIDataTable table > tbody > tr > td,
  .UIPaginatedDataTable > table > tbody > tr > td {
    white-space: nowrap;
  }
}

.UIDataTable table > tbody > tr > td.nowrap,
.UIPaginatedDataTable > table > tbody > tr > td.nowrap {
  white-space: nowrap;
}

.UIDataTable table > tbody > tr > td.normal,
.UIPaginatedDataTable > table > tbody > tr > td.normal {
  white-space: normal;
}

.UIDataTable table > tbody > tr.contrast:nth-child(odd),
.UIPaginatedDataTable > table > tbody > tr.contrast:nth-child(odd) {
  background-color: var(--background-color-datatable-item_odd);
}

.UIDataTable table > tbody > tr.contrast:hover,
.UIPaginatedDataTable > table > tbody > tr.contrast:hover {
  background-color: var(--background-color-datatable-item_hover);
}

.UIDataTable table > tbody > tr > td > .UIImage,
.UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
  border-radius: var(--border-radius-datatable-item);
  -moz-border-radius: var(--border-radius-datatable-item);
  -webkit-border-radius: var(--border-radius-datatable-item);
  min-width: var(--size-datatable-image);
  min-height: var(--size-datatable-image);
  margin-top: calc(0px - var(--padding-datatable-item_tb));
  margin-bottom: calc(0px - var(--padding-datatable-item_tb));
}
@media only screen and (max-width: 768px) {
  .UIDataTable table > tbody > tr > td > .UIImage,
  .UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
    margin-top: calc(0px - var(--padding-datatable-item_tb_xs));
    margin-bottom: calc(0px - var(--padding-datatable-item_tb_xs));
  }
}

/* tbody:END */
/* thead:START */
.UIDataTable table > thead > tr > th,
.UIPaginatedDataTable > table > thead > tr > th {
  border-bottom: var(--border-color-light);
  color: var(--font-color-datatable-head);
  font-size: var(--font-size-datatable-head);
  white-space: nowrap;
  padding: var(--padding-datatable-head_tb) var(--padding-datatable-head_lr);
}

.UIDataTable .bootstrap-table table > thead > tr > th {
  border-bottom: var(--border-datatable-head) !important;
}

.UIDataTable .bootstrap-table table > thead > tr > th > .th-inner {
  padding: var(--padding-datatable-head_tb) var(--padding-datatable-head_lr) !important;
}

.UIDataTable table > thead > tr > th[data-sortable=true] {
  cursor: pointer;
}

.UIDataTable table > thead > tr > th[data-sortable=true]:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-left: var(--padding-gutter);
  content: "\f0dc";
}

.UIDataTable table > thead > tr > th[data-sort=asc]:after {
  content: "\f0de";
}

.UIDataTable table > thead > tr > th[data-sort=desc]:after {
  content: "\f0dd";
}

/* 群組 */
.UIDataTable table > thead > tr.group > th,
.UIPaginatedDataTable > table > thead > tr.group > th {
  background-color: var(--background-color-datatable-group-head);
  border: var(--border-datatable-head-group);
}

/* thead:END */
/* tfoot:START */
.UIDataTable table > tfoot > tr > td,
.UIPaginatedDataTable > table > tfoot > tr > td {
  font-size: var(--font-size-datatable-footer);
  font-weight: var(--font-weight-datatable-footer);
  padding: var(--padding-datatable-head_tb) var(--padding-datatable-head_lr);
}

.UIDataTable table > tfoot > tr > td:first-child,
.UIPaginatedDataTable > table > tfoot > tr > td:first-child {
  padding-left: var(--padding-datatable-foot_first);
}

/* tfoot:END */
@media only screen and (max-width: 768px) {
  .UIDataTable table > tbody .UIDataColumn.action.btnGroup:before,
  .UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-style: normal;
    padding-right: 6px;
    content: "\f138";
    color: var(--color-datatable-button-group);
    font-size: var(--font-size-datatable-control);
  }
  .UIDataTable table > tbody .UIDataColumn.action.btnGroup > *,
  .UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup > * {
    display: none;
  }
}
/********************************      WebKit/layout:UIDataTable/UIPaginatedDataTable:END      ********************************/
/********************************      WebKit/layout:pageControl)UIDataTable/UIPaginatedDataTable/UIPaginatedRepeater/UIPaginatedGridLayout:START      ********************************/
.UIDataTable #pageControl,
.UIPaginatedDataTable #pageControl,
.UIPaginatedRepeater #pageControl,
.UIPaginatedGridLayout #pageControl {
  --background-color-datatable-control_active: var(--color-main);
  --border-datatable-control: var(--border-color-light);
  --font-color-datatable-control: var(--font-color);
  --font-color-datatable-control_active: #fff;
  --font-color-datatable-control_disabled: #777;
  --font-size-datatable-control: 24px;
  --padding-datatable-control_tb: var(--padding-list-foot_tb);
  --padding-datatable-control_lr: var(--padding-list-foot_lr);
  --padding-datatable-control-item: 0 6px;
  --size-datatable-control-item: 32px;
}

.UIDataTable #pageControl,
.UIPaginatedDataTable #pageControl,
.UIPaginatedRepeater #pageControl,
.UIPaginatedGridLayout #pageControl {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: var(--padding-datatable-control_tb) var(--padding-datatable-control_lr);
}

.UIDataTable #pageControl > li > a,
.UIPaginatedDataTable #pageControl > li > a,
.UIPaginatedRepeater #pageControl > li > a,
.UIPaginatedGridLayout #pageControl > li > a {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  border: var(--border-datatable-control);
  color: var(--font-color-datatable-control);
  width: var(--size-datatable-control-item);
  height: var(--size-datatable-control-item);
  margin-left: -1px;
}

.UIDataTable #pageControl > li > a:hover, .UIDataTable #pageControl > li > a.active,
.UIPaginatedDataTable #pageControl > li > a:hover, .UIPaginatedDataTable #pageControl > li > a.active,
.UIPaginatedRepeater #pageControl > li > a:hover, .UIPaginatedRepeater #pageControl > li > a.active,
.UIPaginatedGridLayout #pageControl > li > a:hover, .UIPaginatedGridLayout #pageControl > li > a.active {
  background-color: var(--background-color-datatable-control_active);
  color: var(--font-color-datatable-control_active);
  cursor: default;
  z-index: 2;
}

.UIDataTable #pageControl > li:first-child > a,
.UIPaginatedDataTable #pageControl > li:first-child > a,
.UIPaginatedRepeater #pageControl > li:first-child > a,
.UIPaginatedGridLayout #pageControl > li:first-child > a {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
}

.UIDataTable #pageControl > li:last-child > a,
.UIPaginatedDataTable #pageControl > li:last-child > a,
.UIPaginatedRepeater #pageControl > li:last-child > a,
.UIPaginatedGridLayout #pageControl > li:last-child > a {
  border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
}

.UIDataTable #pageControl > li > a[disabled],
.UIPaginatedDataTable #pageControl > li > a[disabled],
.UIPaginatedRepeater #pageControl > li > a[disabled],
.UIPaginatedGridLayout #pageControl > li > a[disabled] {
  color: var(--font-color-datatable-control_disabled);
  cursor: not-allowed;
}

.UIDataTable #pageControl #prev > i:before,
.UIPaginatedDataTable #pageControl #prev > i:before,
.UIPaginatedRepeater #pageControl #prev > i:before,
.UIPaginatedGridLayout #pageControl #prev > i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f32a";
  font-size: var(--font-size-datatable-control);
  padding: var(--padding-datatable-control-item);
}

.UIDataTable #pageControl #next > i:before,
.UIPaginatedDataTable #pageControl #next > i:before,
.UIPaginatedRepeater #pageControl #next > i:before,
.UIPaginatedGridLayout #pageControl #next > i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f32b";
  font-size: var(--font-size-datatable-control);
  padding: var(--padding-datatable-control-item);
}

.UIDataTable #pageControl .UIMenuWrapper,
.UIPaginatedDataTable #pageControl .UIMenuWrapper,
.UIPaginatedRepeater #pageControl .UIMenuWrapper,
.UIPaginatedGridLayout #pageControl .UIMenuWrapper {
  height: var(--font-size-datatable-control);
}

.UIDataTable #pageControl .UIMenuWrapper::before,
.UIPaginatedDataTable #pageControl .UIMenuWrapper::before,
.UIPaginatedRepeater #pageControl .UIMenuWrapper::before,
.UIPaginatedGridLayout #pageControl .UIMenuWrapper::before {
  line-height: var(--font-size-datatable-control);
}

.UIDataTable #pageControl .UIMenuWrapper > select,
.UIPaginatedDataTable #pageControl .UIMenuWrapper > select,
.UIPaginatedRepeater #pageControl .UIMenuWrapper > select,
.UIPaginatedGridLayout #pageControl .UIMenuWrapper > select {
  -moz-text-align-last: center;
       text-align-last: center;
  text-align: center;
}

.UIDataTable #message,
.UIPaginatedDataTable #message {
  color: var(--font-color-datatable-message);
  display: block;
  padding: var(--padding-datatable-message_tb) var(--padding-datatable-message_lr);
}

/********************************      WebKit/layout:pageControl)UIDataTable/UIPaginatedDataTable/UIPaginatedRepeater/UIPaginatedGridLayout:START      ********************************/
/********************************      WebKit/layout:UIPaginatedRepeater:START      ********************************/
.UIPaginatedRepeater {
  overflow-x: auto;
  border-collapse: collapse;
}

.UIPaginatedRepeater > table {
  table-layout: auto;
}

/********************************      WebKit/layout:UIPaginatedRepeater:END      ********************************/
/********************************      WebKit/layout:UIDropdown:START      ********************************/
.UIDropdown {
  --background-color-dropdown-item: #eee;
  --padding-dropdown: var(var(--padding-webkit));
  --padding-dropdown-item: var(var(--padding-webkit));
}

.UIDropdown .dropdown-menu {
  box-shadow: 0 5px 10px 0 rgba(183, 192, 206, 0.2);
  -webkit-box-shadow: 0 5px 10px 0 rgba(183, 192, 206, 0.2);
  -moz-box-shadow: 0 5px 10px 0 rgba(183, 192, 206, 0.2);
  border: 0;
  padding: var(--padding-dropdown) !important;
}

.UIDropdown .dropdown-menu .dropdown-item {
  font-size: var(--font-size-base);
  padding: var(--padding-list-item);
}

.UIDropdown .dropdown-menu .dropdown-item:hover,
.UIDropdown .dropdown-menu .dropdown-item:active {
  background-color: var(--background-color-dropdown-item);
}

.UIDropdown .dropdown-toggle::after {
  display: none;
}

/********************************      WebKit/layout:UIDropdown:END      ********************************/
/********************************      WebKit/layout:UIEffect:START      ********************************/
.UIEffect.flip {
  cursor: pointer;
}

.UIEffect.flip .inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.9s;
}

.UIEffect.flip .inner.open {
  transform: rotateY(180deg);
}

.UIEffect.flip .inner .face.front,
.UIEffect.flip .inner .face.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.UIEffect.flip .inner .face.back {
  position: absolute;
  top: 0;
  left: 0;
}

.UIEffect.flip .inner .face.back {
  transform: rotateY(180deg);
}

/********************************      WebKit/layout:UIEffect:END      ********************************/
/********************************      WebKit/layout:UIFixedLayout:START      ********************************/
.UIFixedLayout {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  position: relative;
}

.UIFixedLayout > div {
  float: left;
}

/** 設定滿版:START **/
.UIFixedLayout.fill, .UIFixedLayout.fill > div {
  height: 100%;
}

/** 設定滿版:END **/
@media only screen and (max-width: 768px) {
  .UIFixedLayout.responsive > div {
    width: 100% !important;
    margin: 0 !important;
  }
}
/********************************      WebKit/layout:UIFixedLayout:END      ********************************/
/********************************      WebKit/layout:UIForm:START      ********************************/
.UIForm {
  --font-color-form-head: var(--font-color-subtitle);
  --font-color-form-item-prefix: #db5031;
  --font-size-form-head_vertical: var(--font-size-smaller);
  --line-height-form-item-label: 24px;
  --padding-form-head: var(--padding-list-head);
  --padding-form-item_tb: var(--padding-list-item_tb);
  --padding-form-item_lr: var(--padding-list-item_lr);
  --margin-form-caption: var(--margin-webkit) / 2;
  --width-form-item: 62px;
}

@media only screen and (max-width: 768px) {
  .UIForm {
    --width-form-item: 68px;
  }
}
.UIForm > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  border-bottom: var(--border-color-light);
}

/* 水平排列樣式(horizontal):START */
.UIForm > table {
  border-collapse: collapse; /* 設定讓tr可以畫底線 */
}

/* 有設定標題的table需有邊界 */
.UIForm > .caption + table {
  margin-top: var(--margin-form-caption);
}

.UIForm > table > tbody > tr > th {
  color: var(--font-color-form-head);
  min-width: var(--width-form-item);
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding-right: var(--padding-form-head);
}

/* 設定欄位最小高度 */
.UIForm > table > tbody > tr > th > span {
  line-height: var(--line-height-form-item-label);
}

.UIForm > table > tbody > tr > th > .prefix {
  color: var(--font-color-form-item-prefix);
  margin-right: 1px;
}

.UIForm > table > tbody > tr > td {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-start;
  -webkit-align-items: flex-start;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  /* 內容上下對齊  */
  align-items: stretch;
  /* 超出範圍時是否換行 [nowrap | wrap | wrap-reverse] */
  flex-wrap: wrap;
  padding: var(--padding-form-item_tb) var(--padding-form-item_lr);
}

.UIForm > table > tbody > tr > td.nowrap {
  /* 超出範圍時是否換行 [nowrap | wrap | wrap-reverse] */
  flex-wrap: nowrap;
}

/* 水平排列樣式:END */
/* 垂直排列樣式(vertical):START */
/* 有設定標題的table需有邊界 */
.UIForm > .caption + .UIFormItem {
  margin-top: var(--margin-form-caption);
}

.UIForm > .UIFormItem {
  margin-top: var(--margin-form-caption);
}

.UIForm > .UIFormItem:first-child {
  margin-top: 0;
}

.UIForm > .UIFormItem:last-child {
  margin-bottom: 0;
}

.UIForm > .UIFormItem > div.title {
  color: var(--font-color-form-head);
  font-size: var(--font-size-form-head_vertical);
  margin-bottom: var(--padding-form-head);
}

.UIForm > .UIFormItem > div.data {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-start;
  -webkit-align-items: flex-start;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  margin-bottom: var(--padding-form-item_tb);
}

/* 垂直排列樣式:END */
/********************************      WebKit/layout:UIForm:END      ********************************/
/*******************************      WebKit/layout:UIGridLayout:START  ********************************/
.UIGridLayout {
  --padding-grid-layout-item: var(var(--padding-webkit));
}

.UIGridLayout {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.UIGridLayout .item {
  display: inline-block;
  overflow: hidden;
  padding: var(--padding-grid-layout-item);
}

.UIGridLayout .item > .UIImage {
  width: 100%;
}

/*******************************      WebKit/layout:UIGridLayout:END  ********************************/
/********************************      WebKit/layout:UIGroup:START  ********************************/
.UIGroup {
  --background-color-group-mask: #160f0f;
  --background-color-group-head: #eee;
  --background-color-group-head-link-button: var(--color-main);
  --font-size-group-head: 1rem;
  --font-size-group-head_minor: 0.7rem;
  --font-color-group-head-link-button: var(--font-color-white);
  --padding-group-session: var(--padding-layout);
  --padding-group-caption: var(--padding-layout);
  --padding-group-head: var(--padding-gutter);
  --padding-group-head-link-button: var(--padding-webkit);
  --padding-group-body: var(--padding-gutter);
  --margin-group-head_top: 12px;
}

.UIGroup > .caption:first-child {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
}

/** 對齊方式:START **/
.UIGroup.center {
  text-align: center;
  margin: 0 auto;
}

.UIGroup.left {
  float: left;
}

.UIGroup.right {
  float: right;
}

/** 對齊方式:END **/
/* .session(設定群組下面有間距):START */
.UIGroup.session {
  margin-bottom: var(--padding-group-session);
}

/* .session:END */
/** underline:START **/
.UIGroup.underline > .caption {
  border-bottom: var(--border-color-light);
  margin-bottom: var(--padding-group-caption);
}

/** underline:END **/
/** divider:START(畫分割線) **/
.UIGroup.divider {
  border-top: var(--border-color-light);
  margin-top: var(--padding-gutter);
  padding-top: var(--padding-gutter);
}

/** divider:END **/
/** mask(遮罩):START **/
.UIGroup.mask {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  background-color: var(--background-color-group-mask);
  width: 100%;
  height: 100%;
  opacity: 80%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}

.UIGroup.mask > .caption {
  color: #fff;
}

.UIGroup.mask > .content .UIButton {
  width: 200px;
  margin-top: 12px;
}

/** mask:END **/
/** 超過一行顯示...:START **/
.UIGroup.ellipsis {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  flex-grow: 1;
}

/** 對齊方式:END **/
/** 填滿高度:START **/
.UIGroup.fill {
  height: 100%;
  overflow-y: auto;
}

/** 填滿高度:END **/
/** youtube:START **/
.UIGroup.youtubeContainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.UIGroup.youtubeContainer iframe,
.UIGroup.youtubeContainer object,
.UIGroup.youtubeContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/** youtube:START **/
/** toggle: START **/
.UIGroup.toggle > .control {
  cursor: pointer; /* 添加手型鼠標指針 */
}

.UIGroup.toggle > .content {
  display: none; /* 預設隱藏 */
  animation: fadeIn 0.5s; /* 添加下拉動畫 */
}

/** toggle: START **/
/** 設定標題樣式: START **/
.UIGroup > .header {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  font-size: var(--font-size-group-head);
  background-color: var(--background-color-group-head);
  padding: var(--padding-group-head);
}

.UIGroup > .header.minor {
  font-size: var(--font-size-group-head_minor);
}

.UIGroup > .header.marginTop {
  margin-top: var(--margin-group-head_top);
}

.UIGroup > .header .UILinkButton {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-group-head-link-button);
  border: 0;
  color: var(--font-color-group-head-link-button);
  cursor: pointer;
  display: inline-block;
  padding: 0px var(--padding-group-head-link-button);
  white-space: nowrap;
}

.UIGroup > .body {
  padding: var(--padding-group-body);
}

/** 設定小標題樣式: END **/
/** 背景圖: START **/
.UIGroup.bgImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/** 背景圖: END **/
/********************************      WebKit/layout:UIGroup:START  ********************************/
/********************************      WebKit/layout:UIGroupList:START     ********************************/
.UIGroupList {
  --background-color-group-list: #fff;
  --background-color-group-list-caption: transparent;
  --background-color-group-list-item_hover: rgba(0, 0, 0, 0.05);
  --border-radius-group-list: 8px;
  --border-group-list: 1px solid #ddd;
  --border-group-list-caption: 1px solid var(--color-main);
  --border-group-list-item: 1px solid #ddd;
  --font-color-group-list_hover: var(--font-color);
  --padding-group-list: var(--padding-webkit);
  --padding-group-list-caption: var(--padding-webkit);
  --padding-group-list-item_tb: calc(var(--padding-list-item_tb) * 2);
  --padding-group-list-item_lr: calc(var(--padding-list-item_lr) * 2);
}

.UIGroupList {
  border-radius: var(--border-radius-group-list);
  -moz-border-radius: var(--border-radius-group-list);
  -webkit-border-radius: var(--border-radius-group-list);
  background-color: var(--background-color-group-list);
  border: var(--border-group-list);
  position: relative;
  margin-bottom: var(--padding-group-list);
}

.UIGroupList > .top {
  border-top-left-radius: var(--border-radius-group-list);
  -webkit-border-top-left-radius: var(--border-radius-group-list);
  -moz-border-top-left-radius: var(--border-radius-group-list);
  border-top-right-radius: var(--border-radius-group-list);
  -webkit-border-top-right-radius: var(--border-radius-group-list);
  -moz-border-top-right-radius: var(--border-radius-group-list);
  background-color: var(--background-color-group-list-caption);
  border-bottom: var(--border-group-list-caption);
  overflow: hidden;
}

.UIGroupList > .top > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  padding: 0 var(--padding-group-list-caption);
}

.UIGroupList > .top .UIGroupListBar {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  position: absolute;
  top: 0px;
  right: 2px;
  padding: 2px 0;
}

.UIGroupList > .content {
  border-bottom-left-radius: var(--border-radius-group-list);
  -webkit-border-bottom-left-radius: var(--border-radius-group-list);
  -moz-border-bottom-left-radius: var(--border-radius-group-list);
}

.UIGroupList > .item,
.UIGroupList > .content > .item {
  border-bottom: var(--border-group-list-item);
  padding: var(--padding-group-list-item_tb) var(--padding-group-list-item_lr);
}

.UIGroupList > .item:first-child {
  border-top-left-radius: var(--border-radius-group-list);
  -webkit-border-top-left-radius: var(--border-radius-group-list);
  -moz-border-top-left-radius: var(--border-radius-group-list);
  border-top-right-radius: var(--border-radius-group-list);
  -webkit-border-top-right-radius: var(--border-radius-group-list);
  -moz-border-top-right-radius: var(--border-radius-group-list);
}

.UIGroupList > .item:last-child,
.UIGroupList > .content > .item:last-child {
  border-bottom-left-radius: var(--border-radius-group-list);
  -webkit-border-bottom-left-radius: var(--border-radius-group-list);
  -moz-border-bottom-left-radius: var(--border-radius-group-list);
  border-bottom-right-radius: var(--border-radius-group-list);
  -webkit-border-bottom-right-radius: var(--border-radius-group-list);
  -moz-border-bottom-right-radius: var(--border-radius-group-list);
}

.UIGroupList > .item:hover,
.UIGroupList > .content > .item:hover {
  background-color: var(--background-color-group-list-item_hover);
}

.UIGroupList > .item.selected,
.UIGroupList > .content > .item.selected {
  background-color: var(--background-color-group-list-item_hover);
  color: var(--font-color-group-list_hover);
  z-index: 2;
}

.UIGroupList > .item.selected .UILink,
.UIGroupList > .item.selected .UILinkButton,
.UIGroupList > .content > .item.selected .UILink,
.UIGroupList > .content > .item.selected .UILinkButton {
  color: var(--font-color-group-list_hover);
}

/********************************      WebKit/layout:UIGroupList:END     ********************************/
/********************************      WebKit/layout:UIHorizontalLayout:START      ********************************/
.UIHorizontalLayout {
  --border-horizontal-layout: 1px solid #eee;
}

.UIHorizontalLayout,
.UIHorizontalLayout tr {
  width: 100%;
}

.UIHorizontalLayout tr td {
  vertical-align: top;
}

.UIHorizontalLayout.divider > .row > div {
  border-right: var(--border-horizontal-layout);
}

.UIHorizontalLayout.divider > .row > div:last-child {
  border-right: none;
}

/* fill:START */
.UIHorizontalLayout.fill, .UIHorizontalLayout.fill .row, .UIHorizontalLayout.fill .row > div {
  height: 100%;
}

.UIHorizontalLayout.fill .row > div {
  overflow-y: auto;
}

/* fill:END */
/********************************      WebKit/layout:UIHorizontalLayout:START      ********************************/
/********************************      WebKit/layout:UIHorizontalList:START     ********************************/
.UIHorizontalList > .table {
  display: table;
}

.UIHorizontalList > .table > .tr {
  display: table-row;
  width: 100%;
}

.UIHorizontalList > .table > .tr > .td {
  display: table-cell;
  vertical-align: top;
}

/********************************      WebKit/layout:UIHorizontalList:END      ********************************/
/********************************      WebKit/layout:UIHorizontalWizard:START    ********************************/
.UIHorizontalWizard {
  --background-color-horizontal-wizard: #fff;
  --background-color-horizontal-wizard-items: #f2f2f2;
  --font-color-horizontal-wizard-item: var(var(--font-color));
  --border-horizontal-wizard: 1px solid #e3e8ed;
  --border-horizontal-wizard-items: 1px solid #e0e4e8;
  --padding-horizontal-wizard: var(--padding-webkit);
  --padding-horizontal-wizard-item: var(--padding-webkit) calc(var(--padding-webkit)/2) var(--padding-webkit) calc(var(--padding-webkit) * 1.5);
}

.UIHorizontalWizard {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-horizontal-wizard);
  border: var(--border-horizontal-wizard);
  margin-bottom: var(--padding-horizontal-wizard);
}

.UIHorizontalWizard .items {
  background-color: var(--background-color-horizontal-wizard-items);
  border-bottom: var(--border-horizontal-wizard-items);
  padding: 0;
}

.UIHorizontalWizard .items ul {
  padding: 0;
  margin: 0;
}

.UIHorizontalWizard .items ul li {
  color: var(--font-color-horizontal-wizard-item);
  position: relative;
  float: left;
  padding: var(--padding-horizontal-wizard-item);
  margin: 0;
}

.UIHorizontalWizard .items ul li:first-child {
  padding-left: 15px;
  border-radius: 4px 0 0 0;
  -webkit-border-radius: 4px 0 0 0;
  -moz-border-radius: 4px 0 0 0;
}

.UIHorizontalWizard .items ul li:before,
.UIHorizontalWizard .items li:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -10px;
  border: 20px solid transparent;
  border-right: 0;
  border-left: 10px solid #e5e5e5;
  z-index: 1;
}

.UIHorizontalWizard .items ul li:after {
  border-left-color: #f2f2f2;
  right: -9px;
  z-index: 2;
}

.UIHorizontalWizard .items ul li.complete,
.UIHorizontalWizard .wizard ul li.complete:hover {
  background: #f2f2f2;
}

.UIHorizontalWizard .items ul li.complete:after {
  border-left-color: #f2f2f2;
}

.UIHorizontalWizard .items ul li.active {
  background: #fff;
  color: #0088cc;
  font-size: 1.1em;
}

.UIHorizontalWizard .items ul li.active:after {
  border-left-color: #fff;
}

.UIHorizontalWizard .items .badge {
  background: #b1b5b9;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 0.9em;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin-right: 4px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.UIHorizontalWizard .items .badgeInfo {
  background-color: #5191d1;
}

.UIHorizontalWizard .items .badgeSuccess {
  background-color: #3fcf7f;
}

.UIHorizontalWizard .content {
  padding: 12px 24px;
}

.UIHorizontalWizard .actions {
  float: right;
  margin: 2px 10px;
}

.UIHorizontalWizard .actions .UIWizardAction .UIButton {
  margin-top: 2px;
}

.UIHorizontalWizard .actions .UIWizardAction button.btnBack {
  border: 1px solid #c6c6c6;
}

/*@media only screen and (max-width: 768px) {
    .UIHorizontalWizard .items {
        font-size: 0.7em;
    }

    .UIHorizontalWizard .items ul li {
        padding-right: 6px;
    }
}*/
/********************************      WebKit/layout:UIHorizontalWizard:END    ********************************/
/*******************************      WebKit/layout:UIPaginatedGridLayout/UIPaginatedGridLayout2:START  ********************************/
/*******************************      WebKit/layout:UIPaginatedGridLayout/UIPaginatedGridLayout2:END  ********************************/
/********************************      WebKit/layout:UIPanel:START    ********************************/
.UIPanel {
  --background-color-panel: #fff;
  --border-radius-panel: 0px;
  --border-panel: 1px solid rgba(0,0,0,.125);
  --border-panel-bottom: var(--border-color-light);
  --box-shadow-panel: none;
  --font-size-panel-top-minor: var(--font-size-small);
  --font-size-panel-top-group: var(--font-size-small);
  --padding-panel: var(--padding-layout);
  --padding-panel-top: var(--padding-webkit);
  --padding-panel-bottom: var(--padding-webkit);
  --padding-panel-content: var(--padding-layout);
  --padding-panel-content-minor: var(--padding-webkit);
  --padding-panel-content-group: var(--padding-webkit);
  --height-panel-top: 38px;
  --height-panel-top-minor: 26px;
  --height-panel-top-group: 28px;
  --top-panel-bar: calc((var(--height-layout-title) - var(--height-widget)) /2);
  --right-panel-bar: 3px;
  --height-panel-bottom_box: 62px;
}

.UIPanel {
  border-radius: var(--border-radius-panel);
  -moz-border-radius: var(--border-radius-panel);
  -webkit-border-radius: var(--border-radius-panel);
  box-shadow: var(--box-shadow-panel);
  -webkit-box-shadow: var(--box-shadow-panel);
  -moz-box-shadow: var(--box-shadow-panel);
  background-color: var(--background-color-panel);
  border: var(--border-panel);
  position: relative;
  margin-bottom: var(--padding-panel);
}

.UIPanel > .top {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  border-bottom: var(--border-panel);
  padding-left: var(--padding-panel-top);
  padding-right: var(--padding-panel-top);
  height: var(--height-panel-top);
}

.UIPanel > .top .UXXXIPanelBack {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  padding: 0 var(--padding-panel-back);
  position: absolute;
  left: 0px;
}

.UIPanel > .top .UIPanelBack:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f053";
}

.UIPanel > .UIPanelBottom {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-top: var(--border-panel-bottom);
  padding: var(--padding-panel-bottom) 0;
  overflow: hidden;
}

.UIPanel > .content {
  height: 100%;
  padding: var(--padding-panel-content);
}

/* screen 樣式:START */
.UIPanel.screen {
  /* 手機版:START */
  /* 手機版:START */
}
@media only screen and (max-width: 768px) {
  .UIPanel.screen {
    border: none;
  }
}

/* screen 樣式:END */
/* float 樣式:START */
.UIPanel.float {
  position: fixed;
  z-index: 999;
}

/* float 樣式:END */
/* minor 樣式:START */
.UIPanel.minor > .top {
  font-size: var(--font-size-top-caption-minor);
  height: var(--height-panel-top-minor);
}

.UIPanel.minor > .content {
  padding: var(--padding-panel-content-minor);
}

/* minor 樣式:END */
/* group 樣式:START */
.UIPanel.group {
  border: none;
}

.UIPanel.group > .top {
  border-bottom: none;
  font-size: var(--font-size-top-caption-group);
  height: var(--height-panel-top-group);
}

.UIPanel.group > .content {
  padding: var(--padding-panel-content-group);
}

/* group 樣式:END */
/* noBorder 樣式(之後取消用group取代):START */
.UIPanel.noBorder {
  background-color: var(--transparent);
  border: 0;
  margin-bottom: 0;
}

.UIPanel.noBorder > .top > .caption {
  border-bottom: 0;
  padding-left: 0;
}

.UIPanel.noBorder > .content {
  padding: 0px;
}

/* noBorder 樣式:END */
/* dialog 樣式:START */
.UIPanel.dialog > .content {
  overflow-y: hidden !important;
}

/* dialog 樣式:START */
/** 填滿高度:START **/
.UIPanel.fill {
  height: 100%;
}

/** 填滿高度:END **/
/* PanelBox 樣式定義Box彈出時撐滿整個畫面:START */
.UIPanel.PanelBox {
  min-height: 100%;
}

.UIPanel.PanelBox.bottom {
  height: 100%;
  margin-bottom: 0;
}

.UIPanel.PanelBox.bottom > .UIPanelBottom {
  height: var(--height-panel-bottom_box);
}

.UIPanel.PanelBox.caption > .content {
  height: calc(100% - var(--height-panel-top));
  overflow-x: hidden;
  overflow-y: auto;
}

.UIPanel.PanelBox.bottom > .content {
  height: calc(100% - var(--height-panel-bottom_box));
  overflow-y: auto;
}

.UIPanel.PanelBox.caption.bottom > .content {
  height: calc(100% - var(--height-panel-top) - var(--height-panel-bottom_box));
  overflow-y: auto;
}

/* PanelBox 樣式定義Box彈出時撐滿整個畫面:END */
/********************************      WebKit/layout:UIPanel:END    ********************************/
/********************************      WebKit/layout:UIPortlet:START    ********************************/
.UIPortlet {
  --background-color-portlet: #fff;
  --border-radius-portlet: 3px;
  --box-shadow-portlet: none;
  --border-color-portlet: 1px solid rgba(0,0,0,.125);
  --font-size-portlet-caption: var(--font-size-smaller);
  --padding-portlet: var(--padding-webkit);
  --padding-portlet-content: var(--padding-webkit);
  --height-portlet-top: 32px;
}

.UIPortlet.normal {
  border-radius: var(--border-radius-portlet);
  -moz-border-radius: var(--border-radius-portlet);
  -webkit-border-radius: var(--border-radius-portlet);
  box-shadow: var(--box-shadow-portlet);
  -webkit-box-shadow: var(--box-shadow-portlet);
  -moz-box-shadow: var(--box-shadow-portlet);
  background-color: var(--background-color-portlet);
  border: var(--border-color-portlet);
  position: relative;
  margin-bottom: var(--padding-portlet);
}

.UIPortlet.normal > .top {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-bottom: var(--border-color-portlet);
  height: var(--height-portlet-top);
}

.UIPortlet.normal > .top > .caption {
  font-size: var(--font-size-portlet-caption);
}

.UIPortlet.normal > .content {
  padding: var(--padding-portlet-content);
}

/********************************      WebKit/layout:UIPortlet:END    ********************************/
/********************************      WebKit/layout:UIRibbon:START (未整理)     ********************************/
.UIRibbon {
  --background-color-ribbon-wrapper: var(--color-main);
  --color-ribbon: #fff;
  --text-align-ribbon-wrapper: center;
}

.UIRibbon {
  color: var(--color-ribbon);
  position: absolute;
  z-index: 99;
}

.UIRibbon > .wrapper {
  background-color: var(--background-color-ribbon-wrapper);
  position: relative;
  text-align: var(--text-align-ribbon-wrapper);
}

/* top */
.UIRibbon.ribbon-top {
  position: absolute;
  top: 0;
  left: 0;
  text-align: var(--text-align-ribbon-wrapper);
  width: 100%;
}

.UIRibbon.ribbon-top > .wrapper {
  border-radius: 0 0 5px 5px;
  border-width: 0 1px 1px 1px;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin: -1px auto 0;
  padding: 6px 24px;
}

/* bottom */
.UIRibbon.ribbon-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

.UIRibbon.ribbon-bottom > .wrapper {
  border-radius: 5px 5px 0 0;
  border-width: 0 1px 1px 1px;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin: -1px auto 0;
  padding: 6px 24px;
}

/* left */
.UIRibbon.ribbon-left {
  width: 85px;
  height: 88px;
  top: -1px;
  left: -1px;
  overflow: hidden;
}

.UIRibbon.ribbon-left > .wrapper {
  padding: 6px 0;
  right: 30px;
  top: 15px;
  width: 120px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* right */
.UIRibbon.ribbon-right {
  width: 85px;
  height: 88px;
  top: -1px;
  right: -1px;
  overflow: hidden;
}

.UIRibbon.ribbon-right > .wrapper {
  padding: 6px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UIRibbon.bookmark-left,
.UIRibbon.bookmark-right {
  background: #08c;
}

.UIRibbon.bookmark-left {
  top: 2px;
  left: 18px;
  width: 50px;
  height: 75px;
}

.UIRibbon.bookmark-right {
  top: 2px;
  right: 18px;
  width: 50px;
  height: 75px;
}

.UIRibbon.bookmark-left:after, .UIRibbon.bookmark-left:before,
.UIRibbon.bookmark-right:after, .UIRibbon.bookmark-right:before {
  border-top: 15px solid #08c;
  bottom: -15px;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
}

.UIRibbon.bookmark-left:after,
.UIRibbon.bookmark-right:after {
  border-right: 25px solid transparent;
  left: 0;
}

.UIRibbon.bookmark-left:before,
.UIRibbon.bookmark-right:before {
  border-left: 25px solid transparent;
  right: 0;
}

.UIRibbon.bookmark-left .wrapper,
.UIRibbon.bookmark-right .wrapper {
  color: #f6f6f6;
  position: relative;
  padding: 12px 3px;
  text-align: center;
}

.UIRibbon.bookmark-left .wrapper:after,
.UIRibbon.bookmark-right .wrapper:after {
  content: "";
  height: 25px;
  left: -20px;
  position: absolute;
  top: -25px;
  width: 90px;
  box-shadow: 0 10px 10px -10px hsla(0, 0%, 0%, 0.5);
}

/********************************      WebKit/layout:UIRibbon (未整理):END     ********************************/
/********************************      WebKit/layout:UIScrollGroup:START    ********************************/
/** 填滿高度:START **/
.UIScrollGroup.fill {
  height: 100%;
}

/** 填滿高度:END **/
/********************************      WebKit/layout:UIScrollGroup:END    ********************************/
/********************************      WebKit/layout:UIShap:START   ********************************/
.UIShape.breadCrumb {
  --font-color-shape-bread-crumb-item: #666;
  --font-size-shape-bread-crumb: var(--font-size-small);
  --padding-shape-bread-crumb-item: 3px;
  --code-font-awesome-shape-bread-crumb: "";
  --code-font-awesome-shape-bread-crumb-item: "";
}

.UIShape.hint {
  --color-shape-hint: var(--color-red);
}

.UIShape.tag {
  --background-color-shape-tag: var(--color-main);
  --background-color-shape-tag_tag: var(--color-main);
  --background-color-shape-tag_untag: #a5a1a1;
  --color-shape-tag: var(--font-color-white);
  --padding-shape-tag: calc(var(--padding-webkit) / 2) var(--padding-webkit);
  --margin-shape-tag: calc(var(--margin-webkit) / 4);
}

.UIShape.category {
  --background-color-shape-category: var(--color-secondary);
  --color-shape-category: var(--font-color-white);
  --font-size-sharp-category: 0.9rem;
  --padding-shape-category: calc(var(--padding-webkit) / 4) calc(var(--padding-webkit) / 3);
  --margin-shape-category: calc(var(--margin-webkit) / 4);
}

/** default:START **/
.UIShape.default {
  display: inline-block;
}

/** default:END **/
/** calendar:START **/
.UIShape.calendar {
  display: inline-block;
}

.UIShape.calendar:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e0d5";
}

/** calendar:END **/
/** clock:START **/
.UIShape.clock {
  display: inline-block;
}

.UIShape.clock:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f017";
}

/** clock:END **/
/** breadCrumb:START **/
.UIShape.breadCrumb {
  font-size: var(--font-size-shape-bread-crumb);
}

.UIShape.breadCrumb > .UILink:first-child:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-shape-bread-crumb);
}

.UIShape.breadCrumb > .UILabel,
.UIShape.breadCrumb > .UILink {
  color: var(--font-color-shape-bread-crumb-item);
  display: inline-block;
}

.UIShape.breadCrumb > .UILabel:after,
.UIShape.breadCrumb > .UILink:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  padding-left: var(--padding-shape-bread-crumb-item);
  content: var(--code-font-awesome-shape-bread-crumb-item);
}

.UIShape.breadCrumb > .UILabel:last-child:after,
.UIShape.breadCrumb > .UILink:last-child:after {
  content: "";
}

/** breadCrumb:END **/
/** folder:START **/
.UIShape.folder {
  display: inline-block;
}

.UIShape.folder:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f07c";
}

/** folder:END **/
/** delete:START **/
.UIShape.deleted {
  display: inline-block;
}

.UIShape.deleted:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f056";
}

/** delete:END **/
/** enabled:START **/
.UIShape.enabled {
  display: inline-block;
}

.UIShape.enabled:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f058";
}

/** enabled:END **/
/** hint:START **/
.UIShape.hint {
  display: inline-block;
}

.UIShape.hint:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-shape-hint);
  content: "\e02b";
}

/** hint:END **/
/** lost:START **/
.UIShape.lost:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f057";
}

/** lost:END **/
/** set:START **/
.UIShape.set {
  display: inline-block;
}

.UIShape.set:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f013";
}

/** set:END **/
/** switch:START **/
.UIShape.switch {
  display: inline-block;
}

.UIShape.switch:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e0a2";
}

/** switch:END **/
/** tag:START **/
.UIShape.tag {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  background-color: var(--background-color-shape-tag);
  color: var(--color-shape-tag);
  padding: var(--padding-shape-tag);
  margin: var(--margin-shape-tag);
}

.UIShape.tag > *:first-child:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f02b";
}

.UIShape.tag[data-state=untag] {
  background-color: var(--background-color-shape-tag_untag);
}

.UIShape.tag .UILink, .UIShape.tag .UILinkButton {
  color: var(--color-shape-tag);
}

/** tag:END **/
/** win:START **/
.UIShape.win {
  display: inline-block;
}

.UIShape.win:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f058";
}

/** win:END **/
/** category:START **/
.UIShape.category {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-shape-category);
  color: var(--color-shape-category);
  padding: var(--padding-shape-category);
  margin: var(--margin-shape-category);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.UIShape.category:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e1d2";
}

.UIShape.category .UILink, .UIShape.category .UILinkButton {
  color: var(--color-shape-category);
  font-size: var(--font-size-sharp-category);
}

/** category:END **/
/** plus:START **/
.UIShape.plus {
  display: inline-block;
}

.UIShape.plus:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f300";
}

/** plus:END **/
/** error:START **/
.UIShape.error {
  display: inline-block;
}

.UIShape.plus:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f071";
}

/** error:END **/
/** arrowTopDown:START **/
.UIShape.arrowTopDown {
  display: inline-block;
}

.UIShape.arrowTopDown:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f07e";
}

/** arrowTopDown:END **/
/** arrowTopDown:START **/
.UIShape.arrowLeftRight {
  display: inline-block;
}

.UIShape.arrowLeftRight:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f07d";
}

/** arrowTopDown:END **/
/** arrowTo:START **/
.UIShape.arrowTo {
  display: inline-block;
}

.UIShape.arrowTo:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f047";
}

/** arrowTo:END **/
/** receipt:START **/
.UIShape.receipt {
  display: inline-block;
}

.UIShape.receipt:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f543";
}

/** receipt:END **/
/********************************      WebKit/layout:UIShap:END   ********************************/
/********************************      WebKit/layout:UISlider:START  (未整理)    ********************************/
.UISlider {
  --background-color-slider-nav: #fff;
  --background-color-slider-pager: #d6d6d6;
  --background-color-slider-pager_hover: #869791;
}

/* owl-nav: START */
.UISlider .owl-carousel .owl-nav [class*=owl-prev] {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  opacity: 0.2;
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  filter: alpha(opacity=0.2);
  background-color: var(--background-color-slider-nav);
  font-size: 0;
  padding: 10px;
  position: absolute;
  top: 35%;
  left: 15px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-prev]:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f104";
  color: #bababa;
  font-size: 24px;
  padding: 12px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-next] {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  opacity: 0.2;
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  filter: alpha(opacity=0.2);
  background-color: var(--background-color-slider-nav);
  font-size: 0;
  padding: 10px;
  position: absolute;
  top: 35%;
  right: 15px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-next]:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f105";
  color: #bababa;
  font-size: 24px;
  padding: 12px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-prev]:hover,
.UISlider .owl-carousel .owl-nav [class*=owl-next]:hover {
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=0.5);
  background-color: var(--background-color-slider-nav);
}

/* owl-nav: END */
/* owl-dots: START */
.UISlider .owl-carousel .owl-dots {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 1%;
  right: 1%;
}

.UISlider .owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
}

.UISlider .owl-carousel .owl-dots .owl-dot span {
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  background: var(--background-color-slider-pager);
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  transition: opacity 200ms ease;
  -webkit-backface-visibility: visible;
}

.UISlider .owl-carousel .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--background-color-slider-pager_hover);
}

/* owl-dots: END */
.UISliderThumbnail > .owl-thumb-item {
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 768px) {
  .UISlider .owl-carousel .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
  }
}
/********************************      WebKit/layout:UISlider:END  (未整理)    ********************************/
/********************************      WebKit/layout:UITabHost:START      ********************************/
.UITabHost {
  --background-color-tab-host-tabs: #fff;
  --border-tab-host-tabs: var(--border-color-light);
  --border-tab-host-tabs_active: 3px solid var(--color-main);
  --font-color-tab-host-tabs: var(--font-color_disabled);
  --font-color-tab-host-tabs_active: var(--font-color-title);
  --font-size-tab-host-tabs-icon: var(--font-size-icon-base);
  --height-tab-host-tabs_full: 32px;
  --padding-tab-host-tabs: 6px 24px 3px 24px;
  --padding-tab-host-tabs_left: 6px 8px;
  --padding-tab-host-tabs_left_gutter: 2px;
  --padding-tab-host-tabs-icon: var(--padding-gutter);
  --padding-tab-host-content: var(--padding-layout);
}
@media only screen and (max-width: 768px) {
  .UITabHost {
    --padding-tab-host-tabs: 6px 9px 2px 9px;
    --padding-tab-host-tabs_left: 6px 4px 6px 0;
  }
}

.UITabHost > ul.tabs > li.hide {
  display: none;
}

.UITabHost > ul.tabs > li > a {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  background-color: var(--background-color-tab-host-tabs);
  color: var(--font-color-tab-host-tabs);
  height: initial;
}

.UITabHost > .tabs > li.active > a {
  color: var(--font-color-tab-host-tabs_active);
}

.UITabHost > ul.tabs > li > a > i {
  font-size: var(--font-size-tab-host-tabs-icon);
  padding-right: var(--padding-tab-host-tabs-icon);
  text-align: center;
}

/* mode=default */
.UITabHost.default > ul.tabs {
  border-bottom: var(--border-tab-host-tabs);
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

.UITabHost.default > ul.tabs:after {
  clear: both;
  display: table;
  content: "";
}

.UITabHost.default > ul.tabs > li {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  border: var(--border-tab-host-tabs);
  border-bottom: 0;
  display: inline-block;
  margin-bottom: -1px;
}

.UITabHost.default > ul.tabs > li.active {
  border-top: var(--border-tab-host-tabs_active);
}

.UITabHost.default > ul.tabs > li > a {
  padding: var(--padding-tab-host-tabs);
}

.UITabHost.default > .tabContent {
  min-height: 60px;
}

.UITabHost.default > .tabContent > .UITab {
  padding-top: var(--padding-tab-host-content);
}

.UITabHost.default.noPadding > .tabContent > .UITab {
  padding-top: 0;
}

.UITabHost.default.adaptive > ul.tabs {
  display: table;
  width: 100%;
}

.UITabHost.default.adaptive > ul.tabs > li {
  display: table-cell;
}

.UITabHost.default.adaptive > ul.tabs > li > a {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

/* mode=left */
.UITabHost.tabLeft > ul.tabs {
  border-right: var(--border-tab-host-tabs);
  float: left;
}

.UITabHost.tabLeft > ul.tabs > li {
  margin-bottom: var(--padding-tab-host-tabs_left_gutter);
}

.UITabHost.tabLeft > ul.tabs > li.active {
  border-left: var(--border-tab-host-tabs_active);
}

.UITabHost.tabLeft > ul.tabs > li > a {
  padding: var(--padding-tab-host-tabs_left);
}

.UITabHost.tabLeft > .tabContent {
  overflow: hidden;
}

.UITabHost.tabLeft > .tabContent > .UITab {
  padding: 0 var(--padding-tab-host-content);
}

/* 設定滿版:START */
.UITabHost.default.fill {
  height: 100%;
}

.UITabHost.default.fill > ul.tabs {
  height: var(--height-tab-host-tabs_full);
}

.UITabHost.default.fill > .tabContent {
  height: calc(100% - var(--height-tab-host-tabs_full));
}

.UITabHost.default.fill > .tabContent.noTabs {
  height: 100%;
}

.UITabHost.default.fill > .tabContent > .UITab {
  height: 100%;
}

/* 設定滿版:END */
/********************************      WebKit/layout:UITabHost:END      ********************************/
/********************************      WebKit/layout:UITabBar:START (未整理)   ********************************/
.UITabBar.default {
  --background-color-tab-bar-tabs: #fff;
  --border-tab-bar-tabs: var(--border-color-dark);
  --font-color-tab-bar-tabs: var(--font-color);
  --font-color-tab-bar-tabs_disabled: var(--font-color_disabled);
  --font-size-tab-bar-tabs-icon: 18px;
}

/* default: START */
.UITabBar.default {
  display: none;
}

.UITabBar.default .UITabBarMask {
  height: 56px;
}

.UITabBar.default .tabs {
  background-color: var(--background-color-tab-bar-tabs);
  border-top: var(--border-tab-bar-tabs);
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.UITabBar.default .tabs li {
  display: table;
  float: left;
  width: 100%;
}

.UITabBar.default .tabs li > a {
  color: var(--font-color-tab-bar-tabs_disabled);
}

.UITabBar.default .tabs li.active > a {
  color: var(--font-color-tab-bar-tabs);
}

.UITabBar.default .tabs i {
  display: block;
  font-size: var(--font-size-tab-bar-tabs-icon);
  padding: 6px 0 0 0;
  text-align: center;
}

.UITabBar.default .tabs span {
  display: block;
  font-size: 0.8em;
  text-align: center;
  padding: 3px 0 3px 0;
}

/* default: END */
/* right/left: START */
.UITabBar.right {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

.UITabBar.left {
  position: fixed;
  left: 18px;
  bottom: 36px;
  z-index: 9999;
}

.UITabBar.right.circle .tabs a,
.UITabBar.left.circle .tabs a {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
}

.UITabBar.right .tabs i,
.UITabBar.left .tabs i {
  display: block;
  font-size: 22px;
}

.UITabBar.right .tabs span,
.UITabBar.left .tabs span {
  display: block;
}

/* right/left: END */
/* none: START */
.UITabBar.none > ul.tabs {
  /*border-bottom: var(--border-tab-host-tabs);*/
  border-bottom: var(--border-color-light);
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

.UITabBar.none > ul.tabs > li {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  /* border: var(--border-tab-host-tabs); */
  border: var(--border-color-light);
  border-bottom: 0;
  display: inline-block;
  margin-bottom: -1px;
}

.UITabBar.none > ul.tabs > li > a {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  /* background-color: var(--background-color-tab-host-tabs); */
  /* color: var(--font-color-tab-host-tabs); */
  height: initial;
  /* padding: var(--padding-tab-host-tabs); */
  padding: 6px 24px 3px 24px;
}

.UITabBar.none > ul.tabs > li.active {
  border-top: 3px solid var(--color-main);
  /* border-top: var(--border-tab-host-tabs_active); */
}

/* none: END */
@media (max-width: 768px) {
  .UITabBar.default {
    display: initial;
  }
}
/********************************      WebKit/layout:UITabBar:END (未整理)   ********************************/
/********************************      WebKit/layout:UIVerticalAccordion:START  (未整理) ********************************/
.UIVerticalAccordion {
  display: block;
  margin-bottom: 12px;
}

.UIVerticalAccordion > .UIAccordionItem {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  overflow: hidden;
}

.UIVerticalAccordion > .UIAccordionItem + .UIAccordionItem {
  margin-top: 3px;
}

.UIVerticalAccordion > .UIAccordionItem > .header {
  background-color: #fefeff;
  padding: 0 6px 0 12px;
  height: 42px;
}

.UIVerticalAccordion > .UIAccordionItem > .header > .UILabel {
  font-size: 1.1em;
  line-height: 42px;
}

.UIVerticalAccordion > .UIAccordionItem > .header > .UIAccordionItemBar {
  float: right;
  padding: 3px 0;
}

.UIVerticalAccordion > .UIAccordionItem > .header > .UIAccordionItemBar .UILabel,
.UIVerticalAccordion > .UIAccordionItem > .header > .UIAccordionItemBar .UILinkButton {
  line-height: 32px;
}

.UIVerticalAccordion > .UIAccordionItem > .content {
  background-color: #fff;
  border-top: 1px solid #e7ecee;
  padding: 12px 24px;
  visibility: visible;
  /* overflow: auto; */
}

/********************************      WebKit/layout:UIVerticalAccordion:END  (未整理) ********************************/
/********************************      WebKit/layout:UIVerticalLayout:START      ********************************/
.UIVerticalLayout {
  display: table;
  width: 100%;
}

.UIVerticalLayout > .tr {
  display: table-row;
}

.UIVerticalLayout > .tr > .td {
  display: table-cell;
}

/********************************      WebKit/layout:UIVerticalLayout:END      ********************************/
/********************************      WebKit/layout:UIVerticalWizard:START   (未整理)   ********************************/
.UIVerticalWizard {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  margin-bottom: 15px;
}

.UIVerticalWizard .items {
  padding: 0;
  float: left;
}

.UIVerticalWizard .items ul {
  padding: 0;
  margin: 0;
  list-style: none outside none;
}

.UIVerticalWizard .items ul li {
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  margin: 0;
  color: #5b5b5b;
  height: 40px;
  line-height: 40px;
  float: none;
  padding: 0 15px 0 15px;
}

.UIVerticalWizard .items ul li:first-child {
  padding-left: 15px;
  border-radius: 4px 0 0 0;
}

.UIVerticalWizard .items ul li:before,
.UIVerticalWizard .items ul li:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -10px;
  border: 20px solid transparent;
  border-right: 0;
  border-left: 10px solid #e5e5e5;
  z-index: 1;
}

.UIVerticalWizard .items ul li:after {
  right: -9px;
  border-left-color: #e5e5e5;
  z-index: 2;
}

.UIVerticalWizard .items ul li.complete,
.UIVerticalWizard .items ul li.complete:hover {
  background: #f2f2f2;
}

.UIVerticalWizard .items ul li.complete:after {
  border-left-color: #f2f2f2;
}

.UIVerticalWizard .items ul li.active {
  color: #08c;
  background: #fff;
}

.UIVerticalWizard .items ul li.active:after {
  border-left-color: #fff;
}

.UIVerticalWizard .items .badge {
  background: #f2f2f2;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 0.9em;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin-right: 4px;
  border-radius: 10px;
}

.UIVerticalWizard .items .badgeInfo {
  background-color: #5191d1;
}

.UIVerticalWizard .items .badgeSuccess {
  background-color: #3fcf7f;
}

.UIVerticalWizard .content {
  zoom: 1;
  overflow: hidden;
  padding: 12px 24px;
}

.UIVerticalWizard .actions {
  margin: 6px 3px;
  text-align: right;
}

/********************************      WebKit/layout:UIVerticalWizard:END   (未整理)   ********************************/
/********************************      WebKit/navigation:UIHorizontalNavigation:START   ********************************/
.UIHorizontalNavigation {
  --background-color-horizontal-navigation-menu: #fff;
  --background-color-horizontal-navigation-mobilemenu: #fcfcfc;
  --border-horizontal-navigation-mobilemenu: var(--border-color-light);
  --font-color-navigation-navigation-menu: var(--font-color);
  --font-color-navigation-navigation-menu_hover: var(--font-color-link);
  --font-size-navigation-navigation-menu: 16px;
  --font-size-navigation-navigation-menu-title: var(--font-size-large);
}

.UIHorizontalNavigation {
  position: relative;
}

.UIHorizontalNavigation > .menuControl { /* 圖層遮照 */
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

/* 手機版本彈出選單:START */
.UIHorizontalNavigation > .menu > .mobilemenu {
  background: var(--background-color-horizontal-navigation-mobilemenu);
  border-bottom: var(--border-horizontal-navigation-mobilemenu);
  display: none;
  height: 48px;
  position: relative;
  padding: 0 calc(var(--padding-webkit) * 2);
  z-index: 99;
}

.UIHorizontalNavigation > .menu > .mobilemenu .closemenu {
  color: var(--font-color-navigation-navigation-menu);
  font-size: var(--font-size-navigation-navigation-menu);
  line-height: 48px;
}

.UIHorizontalNavigation > .menu > .mobilemenu .title {
  display: inline-block;
  font-size: var(--font-size-navigation-navigation-menu-title);
  line-height: 48px;
  padding: 0 calc(var(--padding-webkit) * 1.5);
}

/* 手機版本彈出選單:END */
.UIHorizontalNavigation > .menu > ul a {
  color: var(--font-color-navigation-navigation-menu);
}

.UIHorizontalNavigation > .menu > ul a:hover {
  color: var(--font-color-navigation-navigation-menu_hover);
}

.UIHorizontalNavigation > .menu > ul > li.caption {
  display: none;
  background-color: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: calc(var(--padding-webkit) / 3) calc(var(--padding-webkit) * 2.4);
}

/* 大畫面時套用 */
@media (min-width: 768px) {
  .UIHorizontalNavigation > .menu > ul a {
    display: inline-block;
    padding: calc(var(--padding-webkit) * 1.5) var(--padding-webkit);
  }
  .UIHorizontalNavigation > .menu > ul ul a {
    padding: var(--padding-webkit);
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > .open {
    display: none;
  }
  /* Level 1:START */
  .UIHorizontalNavigation > .menu > ul,
  .UIHorizontalNavigation > .menu > ul > li {
    display: inline-block;
  }
  /* Level 1:END */
  /* Level 2:START */
  .UIHorizontalNavigation > .menu .level1 > ul {
    background-color: var(--background-color-horizontal-navigation-menu);
    border: var(--border-horizontal-navigation-mobilemenu);
    display: none;
    width: intrinsic;
    white-space: nowrap;
    position: absolute;
    top: 100%;
    z-index: 99;
  }
  .UIHorizontalNavigation > .menu li.level2 {
    display: block;
    vertical-align: top;
    min-width: 160px;
  }
  .UIHorizontalNavigation > .menu li.level2.submenu {
    display: inline-block;
  }
  .UIHorizontalNavigation > .menu li.level2 > a {
    display: block;
    border-bottom: var(--border-horizontal-navigation-mobilemenu);
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIHorizontalNavigation > .menu li.level3 {
    display: block;
  }
  /* Level 3:END */
}
/* 手機畫面時套用 */
@media (max-width: 768px) {
  .UIHorizontalNavigation > .menu > .mobilemenu {
    display: block;
  }
  .UIHorizontalNavigation > .menu > ul a {
    display: block;
    padding: var(--padding-webkit);
  }
  .UIHorizontalNavigation > .menu > ul li.submenu {
    position: relative;
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > a:first-child {
    border-bottom: var(--border-horizontal-navigation-mobilemenu);
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > .open {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
    padding: var(--padding-webkit);
    padding-left: calc(var(--padding-webkit) * 1.5);
  }
  .UIHorizontalNavigation > .menu > ul > li.submenu .open:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-style: normal;
    content: "\f105";
  }
  /* Level 1:START */
  .UIHorizontalNavigation > .menu > ul > li.caption {
    display: block;
  }
  /* Level 1:END */
  /* Level 2:START */
  .UIHorizontalNavigation > .menu > ul ul {
    display: none;
  }
  .UIHorizontalNavigation > .menu > ul li.level2 > a {
    padding-left: var(--padding-layout);
  }
  .UIHorizontalNavigation > .menu > ul li.level2:last-child > a {
    border-bottom: none;
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIHorizontalNavigation > .menu > ul li.level3 > a {
    padding-left: calc(var(--padding-layout) * 2);
  }
  /* Level 3:END */
  /* Level 4:START */
  .UIHorizontalNavigation > .menu > ul li.level4 > a {
    padding-left: calc(var(--padding-layout) * 3);
  }
  /* Level 4:END */
}
/********************************      WebKit/navigation:UIHorizontalNavigation:END   ********************************/
/********************************      WebKit/navigation:UINavBar:START      ********************************/
.UINavBar {
  --background-color-nav-bar: transparent;
  --font-color-nav-bar-home: var(--font-color-link);
  --font-size-nav-bar: var(--font-size-small);
  --font-size-nav-bar-home: var(--font-size-base);
  --code-font-awesome-nav-bar-home: "";
  --code-font-awesome-nav-bar-li: "";
}

.UINavBar {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: var(--background-color-nav-bar);
  font-size: var(--font-size-nav-bar);
  border-radius: 0;
}

.UINavBar .home {
  display: inline-block;
  padding: 0px 3px;
}

.UINavBar .home:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(---font-size-nav-bar-home);
  content: var(--code-font-awesome-nav-bar-home);
}

.UINavBar .home > a {
  color: var(--font-color-nav-bar-home);
}

.UINavBar ul {
  display: inline-block;
}

.UINavBar ul > li {
  display: inline-block;
  padding: 0px 3px;
}

.UINavBar ul li:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-nav-bar-li);
}

/********************************      WebKit/navigation:UINavBar:END      ********************************/
/********************************      WebKit/navigation:UINavToggle:START    ********************************/
.UINavToggle {
  --font-color-nav-toggle: #000;
  --font-color-nav-toggle_hover: #f2f5f8;
}

.UINavToggle {
  color: var(--font-color-nav-toggle);
  font-size: 24px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: none;
}

.UINavToggle:hover {
  color: var(--font-color-nav-toggle_hover);
}

@media only screen and (max-width: 768px) {
  .UINavToggle {
    display: inline-block;
  }
  .navigation-wrapper {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
    width: 80%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    overflow-y: auto;
  }
}
/********************************      WebKit/navigation:UINavToggle:END    ********************************/
/********************************      WebKit/navigation:UIVerticalNavigation:START    ********************************/
.UIVerticalNavigation {
  --background-color-vertical-navigation-nav-mobilemenu: #fcfcfc;
  --border-vertical-navigation-nav-mobilemenu: var(--border-color-light);
  --padding-vertical-navigation-nav-mobilemenu: 0 var(--padding-layout);
  --font-color-vertical-navigation-nav-menu: #000;
  --font-color-vertical-navigation-nav-icon: var(--color-secondary);
  --font-size-vertical-navigation-nav-menu: 16px;
  --line-height-size-vertical-navigation-nav-menu: 48px;
}

.UIVerticalNavigation > .menuControl { /* 圖層遮照 */
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;
}

/* 手機版本彈出選單:START */
.UIVerticalNavigation > .menu > .mobilemenu {
  background: var(--background-color-vertical-navigation-nav-mobilemenu);
  border-bottom: var(--border-vertical-navigation-nav-mobilemenu);
  display: none;
  height: 48px;
  position: relative;
  padding: var(--padding-vertical-navigation-nav-mobilemenu);
  z-index: 99;
}

.UIVerticalNavigation > .menu > .mobilemenu .closemenu {
  color: var(--font-color-vertical-navigation-nav-menu);
  font-size: var(--font-size-vertical-navigation-nav-menu);
  line-height: var(--line-height-size-vertical-navigation-nav-menu);
}

.UIVerticalNavigation > .menu > .mobilemenu .title {
  color: var(--font-color-vertical-navigation-nav-menu);
  display: inline-block;
  font-size: var(--font-size-vertical-navigation-nav-menu);
  line-height: var(--line-height-size-vertical-navigation-nav-menu);
  padding: var(--padding-vertical-navigation-nav-mobilemenu);
}

/* 手機版本彈出選單:END */
.UIVerticalNavigation > .menu ul li.caption {
  display: none;
  background-color: #f5f5f5;
  border-top: var(--border-vertical-navigation-nav-mobilemenu);
  padding: 4px 24px;
}

.UIVerticalNavigation > .menu ul a {
  display: block;
  padding: 12px 12px;
}

.UIVerticalNavigation > .menu ul a:hover {
  color: initial;
  background: rgba(0, 0, 0, 0.7);
}

.UIVerticalNavigation > .menu ul a > i {
  color: var(--font-color-vertical-navigation-nav-icon);
  margin-right: 6px;
}

.UIVerticalNavigation > .menu ul li {
  position: relative;
}

.UIVerticalNavigation > .menu ul li.active > a {
  font-weight: 800;
}

/* 大畫面時套用 */
@media (min-width: 768px) {
  /* 設定.active樣式*/
  /* Level 1:START */
  /* Level 1:END */
  /* Level 2:START */
  .UIVerticalNavigation > .menu li.level2 > a {
    padding-left: 36px;
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIVerticalNavigation > .menu li.level3 > a {
    padding-left: 48px;
  }
  /* Level 3:START */
}
/* 手機畫面 */
@media (max-width: 768px) {
  .UIVerticalNavigation > .menu > .mobilemenu {
    display: block;
  }
  .UIVerticalNavigation > .menu ul li.caption {
    display: black;
  }
  .UIVerticalNavigation > .menu > ul > li > a:hover,
  .UIVerticalNavigation > .menu > ul li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  /* 設定.active樣式*/
  /* Level 1:START */
  /* Level 1:END */
  /* Level 2:START */
  .UIVerticalNavigation > .menu .level2 > a {
    padding-left: 36px;
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIVerticalNavigation > .menu .level3 > a {
    padding-left: 48px;
  }
  /* Level 3:START */
}
/********************************      WebKit/navigation:UIVerticalNavigation:START    ********************************/
/********************************      WebKit/net:Box(GLightbox):START   ********************************/
#glightbox-body {
  --background-box-overlay-opacity: 0.6;
  --padding-box-content_box: 24px;
  --border-radius-box: 6px;
}

#glightbox-body.glightbox-container {
  z-index: 9999 !important; /* 修正z-index過大 */
}

/* 取消彈出視窗文字不能複製問題 */
#glightbox-body.glightbox-container .gslide {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/** 講relative設定到外層, 避免關閉按鈕跑位置 */
#glightbox-body .gslide-inline {
  position: relative;
}

/* 設定背景透明度 */
#glightbox-body > .goverlay {
  opacity: var(--background-box-overlay-opacity) !important;
}

/* 取消切換按鈕 */
#glightbox-body .glightbox-button-hidden {
  display: none;
}

/* 取消彈出視窗預設padding */
#glightbox-body .ginlined-content {
  padding: 0;
}

#glightbox-body .ginlined-content .BoxContent {
  height: 100%;
  overflow-y: auto;
}

/* 彈出視窗有.box時增加pedding */
#glightbox-body .ginlined-content .BoxContent.box {
  padding: var(--padding-box-content_box);
}

#glightbox-body .gslide-inline, #glightbox-body .ginlined-content, #glightbox-body .BoxContent {
  border-radius: var(--border-radius-box);
  -moz-border-radius: var(--border-radius-box);
  -webkit-border-radius: var(--border-radius-box);
  /*overflow: hidden;*/
}

/* 關閉按鈕樣式 */
#glightbox-body #glightbox-close {
  background: url(https://gdn.beezsys.com/global/support/glightbox/images/glightbox-close.png) no-repeat top center;
  background-size: 35px 33px;
  -moz-background-size: 35px 33px;
  -webkit-background-size: 35px 33px;
  -o-background-size: 35px 33px;
  cursor: pointer;
  display: block;
  width: 36px;
  height: 36px;
  text-indent: -9999px;
  z-index: 9999;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: absolute;
  top: -1px;
  right: -1px;
}

/* 修正彈出時, 原畫面顯示不正常 */
.glightbox-open {
  height: 100% !important;
}

/* 修正手機版畫面:START */
@media only screen and (max-width: 768px) {
  #glightbox-body .gslide-inline {
    width: 90% !important;
    height: 80% !important;
  }
}
/* 修正手機版畫面:END */
/********************************      WebKit/net:Box(GLightbox):END   ********************************/
/********************************      WebKit/net:Box(colorbox):START   ********************************/
.Box {
  --background-color-box: #fff;
  --height-box-caption: 36px;
}

/* 蓋住底的遮罩 */
#cboxOverlay.Box {
  background: #000;
  opacity: 0.9;
}

#colorbox.Box #cboxContent, #colorbox.Box #cboxContent #cboxLoadedContent {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#colorbox.Box #cboxContent {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background: var(--background-color-box);
  margin-top: 20px;
  margin-right: 20px;
}

#colorbox.Box #cboxContent #cboxLoadedContent {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

/* 關閉按鈕 */
#colorbox.Box #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: absolute;
  top: -16px;
  right: -16px;
  display: block;
  width: 36px;
  height: 36px;
  text-indent: -9999px;
  z-index: 9999;
  background: url(https://gdn.beezsys.com/global/support/colorbox/images/close.png) no-repeat top center;
  background-size: 35px 33px;
  -moz-background-size: 35px 33px;
  -webkit-background-size: 35px 33px;
  -o-background-size: 35px 33px;
}

/* 標題 */
#colorbox.Box .BoxCaption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #2b2b2b;
  font-size: var(--font-size-large);
  line-height: var(--height-box-caption);
  text-align: center;
  height: var(--height-box-caption);
}

/* 內容 */
#colorbox.Box .BoxContent.simple {
  min-height: 100%;
  height: 100%;
}

#colorbox.Box .BoxContent.complex {
  height: calc(100% - var(--height-box-caption));
}

#colorbox.Box .BoxContent.box {
  padding: 12px;
}

@media (max-width: 768px) {
  #colorbox.Box {
    width: 100% !important;
    left: 3% !important;
  }
  #colorbox.Box #cboxContent {
    width: 94% !important;
  }
  #colorbox.Box #cboxWrapper,
  #colorbox.Box #cboxContent #cboxLoadedContent {
    width: 100% !important;
  }
}
/********************************      WebKit/net:Box:END   ********************************/
/********************************      WebKit/widget:UIBirthday:START     ********************************/
.UIBirthdayWrapper {
  --border-birthday: var(--border-color-widget);
  --border-birthday-age: var(--border-color-light);
  --border-radius-birthday: var(--border-radius-widget);
  --padding-birthday-select: 0 var(--padding-webkit) 0 var(--padding-webkit);
  --padding-birthday-age: 0 var(--padding-webkit) 0 var(--padding-webkit);
  --height-birthday: var(--height-widget);
}

.UIBirthdayWrapper {
  border-radius: var(--border-radius-birthday);
  -moz-border-radius: var(--border-radius-birthday);
  -webkit-border-radius: var(--border-radius-birthday);
  border: var(--border-birthday);
  margin: 0 2px 0 0;
  position: relative;
  width: 100%;
  height: var(--height-birthday);
}

.UIBirthdayWrapper > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  padding: var(--padding-birthday-select);
}

.UIBirthdayWrapper > select:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UIBirthdayWrapper > select[readonly] {
  background-color: var(--background-color_readonly);
  opacity: 0.9;
}

.UIBirthdayWrapper .age {
  border-left: var(--border-birthday-age);
  display: block;
  line-height: var(--height-birthday);
  padding: var(--padding-birthday-age);
  height: var(--height-birthday);
  position: absolute;
  top: -1px;
  right: 0;
}

/********************************      WebKit/widget:UIBirthday:START     ********************************/
/********************************      WebKit/widget:UIButton:START      ********************************/
.UIButton {
  --background-color-button: var(--color-main);
  --background-color-button_hover: var(--color-secondary);
  --background-color-button-info: #45bfec;
  --background-color-button-info_hover: #5bccf6;
  --background-color-button-warn: #ff6359;
  --background-color-button-warn_hover: #ce5048;
  --background-color-button-confirm: #18a689;
  --background-color-button-confirm_hover: #159077;
  --background-color-button-cancel: #eee;
  --background-color-button-cancel_hover: #f6f6f6;
  --background-color-button-back: #eee;
  --background-color-button-back_hover: #f6f6f6;
  --background-color-button-delete: #e32b70;
  --background-color-button-delete_hover: #e32b70;
  --background-color-button-approve: var(--color-main);
  --background-color-button-reject: var(--background-color-button-warn);
  --font-color-button: var(--font-color-white);
  --font-color-button_hover: var(--font-color-white);
  --font-color-button-cancel: var(--font-color);
  --font-color-button-back: var(--font-color);
  --font-color-button-delete: var(--font-color-white);
  --padding-button: var(--padding-webkit);
  --padding-button-approve: var(--padding-layout);
  --padding-button-reject: var(--padding-layout);
  --height-button: var(--height-widget);
  --code-font-awesome-button-info: "";
  --code-font-awesome-button-back: "";
  --code-font-awesome-button-cancel: "";
  --code-font-awesome-button-search: "";
  --code-font-awesome-button-new: "";
  --code-font-awesome-button-save: "";
  --code-font-awesome-button-update: "";
  --code-font-awesome-button-edit: "";
  --code-font-awesome-button-delete: "";
  --code-font-awesome-button-setting: "";
  --code-font-awesome-button-refresh: "";
  --code-font-awesome-button-print: "";
  --code-font-awesome-button-print-label: "";
  --code-font-awesome-button-approve: "";
  --code-font-awesome-button-reject: "";
  --code-font-awesome-button-facebook: "";
  --code-font-awesome-button-line: "";
  --code-font-awesome-button-weixin: "";
}

.UIButton {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-button);
  border: 0;
  color: var(--font-color-button);
  cursor: pointer;
  display: inline-block;
  padding: 0px var(--padding-button);
  white-space: nowrap;
  height: var(--height-button);
  /* margin-right: 2px; */
}

.UIButton:hover {
  background-color: var(--background-color-button_hover);
  color: var(--font-color-button_hover);
  outline-width: 0;
}

.UIButton[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}

.UIButton.btnInfo {
  background-color: var(--background-color-button-info);
}

.UIButton.btnInfo:hover {
  background-color: var(--background-color-button-info_hover);
}

.UIButton.btnInfo:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-info);
}

.UIButton.btnWarn {
  background-color: var(--background-color-button-warn);
}

.UIButton.btnWarn:hover {
  background-color: var(--background-color-button-warn_hover);
}

.UIButton.btnBack {
  background-color: var(--background-color-button-back);
  color: var(--font-color-button-back);
}

.UIButton.btnBack:hover {
  background-color: var(--background-color-button-back_hover);
  color: var(--font-color-button-back);
}

.UIButton.btnBack:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-back);
}

.UIButton.btnCancel {
  background-color: var(--background-color-button-cancel);
  color: var(--font-color-button-cancel);
}

.UIButton.btnCancel:hover {
  background-color: var(--background-color-button-cancel_hover);
  color: var(--font-color-button-cancel);
}

.UIButton.btnCancel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-cancel);
}

.UIButton.btnConfirm {
  background-color: var(--background-color-button-confirm);
}

.UIButton.btnConfirm:hover {
  background-color: var(--background-color-button-confirm_hover);
}

.UIButton.btnSearch:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-search);
}

.UIButton.btnNew:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-new);
}

.UIButton.btnSave:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-save);
}

.UIButton.btnUpdate:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-update);
}

.UIButton.btnEdit:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-edit);
}

.UIButton.btnDelete {
  background-color: var(--background-color-button-delete);
  color: var(--font-color-button-delete);
}

.UIButton.btnDelete:hover {
  background-color: var(--background-color-button-delete_hover);
}

.UIButton.btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-delete);
}

.UIButton.btnSetting:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-setting);
}

.UIButton.btnRefresh:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-refresh);
}

.UIButton.btnPrint:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-print);
}

.UIButton.btnPrintLabel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-print-label);
}

.UIButton.btnApprove {
  background-color: var(--background-color-button-approve);
  padding: 0 var(--padding-button-approve);
}

.UIButton.btnApprove:hover {
  background-color: var(--background-color-button-approve);
}

.UIButton.btnApprove:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-approve);
}

.UIButton.btnReject {
  background-color: var(--background-color-button-reject);
  padding: 0 var(--padding-button-reject);
}

.UIButton.btnReject:hover {
  background-color: var(--background-color-button-reject);
}

.UIButton.btnReject:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-reject);
}

/** btnFacebookLogin:START **/
.UIButton.btnFacebook {
  background-color: #305891;
}

.UIButton.btnFacebook:hover {
  background-color: #305891;
}

.UIButton.btnFacebook:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-facebook);
}

/** btnFacebookLogin:END **/
/** btnLine:START **/
.UIButton.btnLine {
  background-color: #1dbf21;
}

.UIButton.btnLine:hover {
  background-color: #1dbf21;
}

.UIButton.btnLine:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-line);
}

/** btnLine:END **/
/** btnWeixin:START **/
.UIButton.btnWeixin {
  background-color: #82d44a;
}

.UIButton.btnWeixin:hover {
  background-color: #82d44a;
}

.UIButton.btnWeixin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-weixin);
}

/** btnWeixin:END **/
.UIButton + .UIButton {
  margin-left: 2px;
}

/********************************      WebKit/widget:UIButton:END      ********************************/
/********************************      WebKit/widget:UIButtonExport:START      ********************************/
.UIButtonExport {
  --background-color-button-export: #feae20;
  --background-color-button-export_hover: #fec04e;
  --color-button-export-excel: #0f642f;
  --color-button-export-pdf: #b70006;
  --font-size-button-export-icon: 24px;
  --padding-button-export-dropdown-menu: var(--padding-webkit);
  --padding-button-export-dropdown-menu-tem: calc(var(--padding-webkit) / 2);
  --margin-button-export-dropdown-menu-tem: calc(var(--margin-webkit) / 2);
  --border-button-export-dropdown-menu-item: var(--border-color-dark);
  --code-font-awesome-button-export: "";
  --code-font-awesome-button-export-excel: "";
  --code-font-awesome-button-export-pdf: "";
}

#exportControl {
  --padding-export-control: 36px;
  --height-export-control-button: 48px;
  --code-font-awesome-export-control-button: "";
}

.UIButtonExport.dropdown,
.UIButtonExport.dropdown .dropdown-toggle, .UIButtonExport.dropdown button {
  width: 100%;
}

.UIButtonExport.dropdown .dropdown-toggle::after {
  display: none;
}

.UIButtonExport.dropdown button {
  background-color: var(--background-color-button-export);
}

.UIButtonExport.dropdown button:hover {
  background-color: var(--background-color-button-export_hover);
}

.UIButtonExport.dropdown button:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-export);
}

.UIButtonExport.dropdown .dropdown-menu {
  padding: var(--padding-button-export-dropdown-menu);
}

.UIButtonExport.dropdown .dropdown-menu > div {
  border-bottom: var(--border-button-export-dropdown-menu-item);
  padding-bottom: var(--padding-button-export-dropdown-menu-tem);
  margin-bottom: var(--margin-button-export-dropdown-menu-tem);
}

.UIButtonExport.dropdown .dropdown-menu > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.UIButtonExport.dropdown .dropdown-menu .UILinkButton.excel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-export-excel);
  color: var(--color-button-export-excel);
  font-size: --font-size-button-export-icon;
}

.UIButtonExport.dropdown .dropdown-menu .UILinkButton.pdf:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-export-pdf);
  color: var(--color-button-export-pdf);
  font-size: --font-size-button-export-icon;
}

.UIButtonGroup > div.UIButtonExport:last-child .dropdown-toggle .UIButton {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/** 匯出 **/
#exportControl {
  padding: var(--padding-export-control);
}

#exportControl .UIButton {
  width: 100%;
  height: var(--height-export-control-button);
}

#exportControl .UIButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-export-control-button);
}

/********************************      WebKit/widget:UIButtonExport:END      ********************************/
/********************************      WebKit/widget:UICalendar:START    ********************************/
.UICalendar {
  --background-color-calendar-event: var(--color-main);
  --color-calendar-event: var(--color-white);
}

@media (max-width: 768px) {
  .UICalendar.fc .fc-toolbar-title {
    font-size: 1rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .UICalendar.fc .fc-view-harness {
    height: 300px !important;
  }
}

.UICalendar.fc .fc-daygrid-event {
  background-color: var(--background-color-calendar-event);
  color: var(--color-calendar-event);
}

.UICalendar.fc .fc-daygrid-event .fc-daygrid-event-dot {
  border-color: var(--color-calendar-event);
}

.UICalendar.fc .fc-timegrid-event {
  background-color: var(--background-color-calendar-event);
  color: var(--color-calendar-event);
}

/********************************      WebKit/widget:UICalendar:END    ********************************/
/********************************      WebKit/widget:UICheckbox:START      ********************************/
.UICheckboxWrapper {
  --background-color-checkbox: transparent;
  --background-image-data-checkbox: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMi40LjUgLS0+Cjxzdmcgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA0NDggNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJwYXRoMSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIiBkPSJNIDQzOC42MDAwMDYgMTA1LjM5OTk5NCBDIDQ1MS4xMDAwMDYgMTE3Ljg5OTk5NCA0NTEuMTAwMDA2IDEzOC4xMDAwMDYgNDM4LjYwMDAwNiAxNTAuNjAwMDA2IEwgMTgyLjYwMDAwNiA0MDYuNjAwMDA2IEMgMTcwLjEwMDAwNiA0MTkuMTAwMDA2IDE0OS44OTk5OTQgNDE5LjEwMDAwNiAxMzcuMzk5OTk0IDQwNi42MDAwMDYgTCA5LjM3MiAyNzguNjAwMDA2IEMgLTMuMTI0IDI2Ni4xMDAwMDYgLTMuMTI0IDI0NS44OTk5OTQgOS4zNzIgMjMzLjM5OTk5NCBDIDIxLjg3MDAwMSAyMjAuODk5OTk0IDQyLjEzMDAwMSAyMjAuODk5OTk0IDU0LjYzMDAwMSAyMzMuMzk5OTk0IEwgMTU5LjEwMDAwNiAzMzguNzAwMDEyIEwgMzkzLjM5OTk5NCAxMDUuMzk5OTk0IEMgNDA1Ljg5OTk5NCA5Mi44ODAwMDUgNDI2LjEwMDAwNiA5Mi44ODAwMDUgNDM4LjYwMDAwNiAxMDUuMzk5OTk0IEwgNDM4LjYwMDAwNiAxMDUuMzk5OTk0IFoiLz4KPC9zdmc+Cg==");
  --border-color-checkbox: var(--color-main);
  --border-radius-checkbox: var(--border-radius-widget);
  --min-width-checkbox-label: 50px;
  --margin-checkbox-label_left: calc(var(--margin-webkit) / 2);
  --margin-checkbox-label_right: var(--margin-webkit);
}

.UICheckboxWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
}

.UICheckboxWrapper input[type=checkbox][disabled] {
  cursor: default;
}

.UICheckboxWrapper input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--border-radius-checkbox);
  -moz-border-radius: var(--border-radius-checkbox);
  -webkit-border-radius: var(--border-radius-checkbox);
  background-color: var(--background-color-checkbox);
  border: 1px solid var(--border-color-checkbox);
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.UICheckboxWrapper input[type=checkbox]:checked {
  background-image: var(--background-image-data-checkbox);
}

.UICheckboxWrapper > input + span {
  min-width: var(--min-width-checkbox-label);
  margin-left: var(--margin-checkbox-label_left);
  margin-right: var(--margin-checkbox-label_right);
}

table.UICheckboxGroup {
  border-collapse: separate;
  border-spacing: 0 6px;
}

/********************************      WebKit/widget:UICheckbox:END      ********************************/
/********************************      WebKit/widget:UIColor:START      ********************************/
.UIColor {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}

/********************************      WebKit/widget:UIColor:END      ********************************/
/********************************      WebKit/widget:UIContent:START      ********************************/
.UIContent {
  display: block;
  line-height: 1.6;
}

/* TYPE=text */
xmp.UIContent {
  margin: 0;
}

/* TYPE=html */
div.UIContent {
  letter-spacing: 1px;
  white-space: normal;
  text-align: justify;
}

.UIContent strong {
  font-weight: var(--font-weight-bold);
}

.UIContent em {
  font-style: Italic;
}

.UIContent h1 {
  font-size: var(font-size-h1);
  font-weight: var(font-weight-bold);
}

.UIContent h2 {
  font-size: var(font-size-h2);
  font-weight: var(font-weight-bold);
}

.UIContent h3 {
  font-size: var(font-size-h3);
  font-weight: var(font-weight-base);
}

.UIContent h4 {
  font-size: var(font-size-h4);
  font-weight: var(font-weight-base);
}

.UIContent h5 {
  font-size: var(font-size-h5);
  font-weight: var(font-weight-base);
}

.UIContent h6 {
  font-size: var(font-size-h6);
  font-weight: var(font-weight-light);
}

.UIContent sup {
  vertical-align: super;
  font-size: smaller;
}

.UIContent sub {
  vertical-align: sub;
  font-size: smaller;
}

.UIContent ol {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 20px;
}

.UIContent ol li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.UIContent ul {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 20px;
}

.UIContent ul li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.UIContent ul ul {
  list-style-type: circle;
}

/* UIContent 裡面放youtube影片, 需在裡面外面加上一個div class="youtube", 才能做RWD */
.UIContent .youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.UIContent .youtube iframe, .youtube object, .youtube embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/********************************      WebKit/widget:UIContent:END      ********************************/
/********************************      WebKit/widget:UIDate/UIDateRange:START     ********************************/
.UIDateRangeWrapper {
  --background-color-date-range: #e1e1e1;
}

.UIDateWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
}

.UIDateWrapper > .UIDate {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
  padding: 0.375rem 0.2rem 0.275rem 0;
}

.UIDateWrapper > .UIDate:disabled,
.UIDateWrapper > .UIDate[readonly] {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
  background-color: transparent;
  opacity: 1;
}

.UIDateWrapper.input-group .input-group-text {
  background-color: var(--transparent);
  border: 0;
  height: 100%;
}

.UIDateWrapper i {
  font-size: var(--font-size-icon-input);
}

/* 需修正這行, 不然在pop window 沒辦法顯示出來(z-index需設定最大, 不然pop時無法顯示) */
.datepicker {
  font-size: var(--font-size-base);
  line-height: 30px;
  z-index: 9999 !important;
  opacity: 1;
}

/* 修正日期區間的 ～ 大小*/
.UIDateRangeWrapper.input-daterange .input-group-addon {
  background-color: var(--background-color-date-range);
  font-size: 16px;
  margin: 0;
  text-align: center;
}

/********************************      WebKit/widget:UIDate/UIDateRange:END     ********************************/
/********************************      WebKit/widget:UIDownloadButton:START      ********************************/
.UIDownloadButton {
  --code-font-awesome-link-button-file: "";
  --font-color-link-button: #034c70;
  --font-color-link-button_hover: $font-color-link_hover;
  --padding-link-button-file: 3px 12px;
}

.UIDownloadButton {
  color: var(--font-color-link-button);
  cursor: pointer;
  text-decoration: none;
}

.UIDownloadButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-link-button-file);
}

.UIDownloadButton:hover {
  color: var(--font-color-link-button_hover);
}

.UIDownloadButton[disabled],
.UIDownloadButton[disabled]:hover {
  color: var(font-color-link-button_disabled);
  cursor: default;
}

/********************************      WebKit/widget:UIDownloadButton:END      ********************************/
/********************************      WebKit/widget:UIFileUpload:START    ********************************/
.UIFileUpload {
  --font-color-file-upload: var(--font-color-white);
}

.UIFileUpload {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  color: var(--font-color-file-upload);
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

/** btnUploadView:START **/
.UIFileUpload .btnUploadView, .UIFileUpload .btnUploadView > div {
  cursor: pointer;
  /*width: 100%;*/
}

.UIFileUpload .btnUploadView:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0ee";
}

.UIFileUpload .btnUploadView #btnUpload {
  border-left: var(--border-color-dark);
  line-height: var(--height-widget);
  padding-left: calc(var(--padding-webkit) / 2);
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnUploadView .progressBar {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  filter: alpha(opacity=30);
  opacity: 0.3;
  -moz-opacity: 0.3;
}

/** btnUploadView:END **/
/** btnDownloadView:START **/
.UIFileUpload .btnDownloadView:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f019";
}

.UIFileUpload .btnDownloadView #btnDownload {
  color: var(--font-color-file-upload);
  border-left: var(--border-color-dark);
  display: inline-block;
  line-height: var(--height-widget);
  padding-left: calc(var(--padding-webkit) / 2);
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnDownloadView #btnFilename {
  color: var(--font-color-file-upload);
  padding-left: calc(var(--padding-webkit) / 4);
}

/** btnDownloadView:END **/
.UIFileUpload .btnDeleteView {
  background-color: var(--background-color-button);
  position: absolute;
  top: 0;
  right: 0;
}

.UIFileUpload .btnDeleteView:before {
  padding-left: calc(var(--padding-webkit) / 2);
  content: " | ";
}

.UIFileUpload .btnDeleteView #btnDelete {
  line-height: var(--height-widget);
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnDeleteView #btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2ed";
}

/********************************      WebKit/widget:UIFileUpload:END    ********************************/
/********************************      WebKit/widget:UIHelper:START    ********************************/
i.UIHelper {
  color: #a63614;
  font-size: var(--font-size-icon-tip);
  padding: 6px 12px;
}

/********************************      WebKit/widget:UIHelper:END   ********************************/
/********************************      WebKit/widget:UIImage:START      ********************************/
.UIImage.circle {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.UIImage.responsive {
  max-width: 100%;
  height: auto;
}

/* 修正舊Bootstrap加上的CSS */
img.img-responsive {
  max-width: 100%;
  height: auto;
}

/********************************      WebKit/widget:UIImage:END      ********************************/
/********************************      WebKit/widget:UIImageButton:START      ********************************/
.UIImageButton {
  cursor: pointer;
  cursor: hand;
}

/********************************      WebKit/widget:UIImageButton:END      ********************************/
/********************************      WebKit/widget:UIImageUpload:START    ********************************/
.UIImageUpload {
  ---border-color-image-upload: 2px solid #fff;
}

.UIImageUpload {
  box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: var(--border-color-image-upload);
  position: relative;
  min-width: 36px;
  min-height: 36px;
  overflow: hidden;
}

.UIImageUpload .progressBar {
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  z-index: 9999;
  filter: alpha(opacity=30);
  opacity: 0.3;
  -moz-opacity: 0.3;
}

.UIImageUpload #imgPreview {
  border: var(--border-color-light);
  /*
  position: absolute;
  top: 0px;
  left: 0px;*/
}

.UIImageUpload .btnUploadView,
.UIImageUpload .btnDeleteView {
  position: absolute;
  left: 6px;
  bottom: 0px;
}

.UIImageUpload .btnUploadView #uploadFile {
  display: none;
}

.UIImageUpload .btnUploadView #btnUpload {
  cursor: pointer;
  overflow: hidden;
  display: block;
  z-index: 9999;
}

.UIImageUpload .btnUploadView #btnUpload:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f332";
  font-size: 24px;
}

.UIImageUpload .btnDeleteView #btnDelete {
  cursor: pointer;
  overflow: hidden;
  display: block;
  z-index: 9999;
}

.UIImageUpload .btnDeleteView #btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f2ed";
  font-size: 24px;
}

/********************************      WebKit/widget:UIImageUpload:END    ********************************/
/********************************      WebKit/widget:UILabel:START      ********************************/
.UILabel {
  --color-label-hint: #ee3939;
  --color-label-comment: var(--color-comment);
  --font-size-label-hint: 0.85rem;
  --font-size-label-comment: 0.9em;
  --font-size-label-check: 1.1em;
  --padding-label-session: 3px;
  --code-font-awesome-label-check: "";
  --font-size-label-footnote: var(--font-size-smaller);
  --font-weight-label-footnote: 600;
}

.UILabel.h1, .UILabel.h2, .UILabel.h3, .UILabel.h4, .UILabel.h5, .UILabel.h6 {
  margin-bottom: 2px;
}

.UILabel.h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

.UILabel.h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

.UILabel.h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-base);
}

.UILabel.h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-base);
}

.UILabel.h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-base);
}

.UILabel.h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-light);
}

.UILabel.session {
  padding-left: var(--padding-label-session);
  padding-right: var(--padding-label-session);
}

.UILabel.hint {
  color: var(--color-label-hint);
  font-size: var(--font-size-label-hint);
}

.UILabel.comment {
  color: var(--color-label-comment);
  font-size: var(--font-size-label-comment);
}

.UILabel.deleted {
  text-decoration: line-through;
}

.UILabel.check:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-label-check);
  font-size: var(--font-size-label-check);
}

.UILabel.footnote {
  font-size: var(--font-size-label-footnote);
  font-weight: var(--font-weight-label-footnote);
}

.UILabel-block {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  line-height: 1.6;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

.UILabel-block .UILabel {
  white-space: nowrap !important;
}

/********************************      WebKit/widget:UILabel:END      ********************************/
/********************************      WebKit/widget:UILine:START   ********************************/
.UILine {
  --border-top-line: 1px solid #dedede;
  --border-bottom-line: 1px solid white;
  --padding-line: 8px 0;
  --padding-line_small: 4px 0;
  --padding-line-large: 14px 0;
}

hr.UILine {
  border: 0;
  border-top: var(--border-top-line);
  border-bottom: var(--border-bottom-line);
  height: 0;
}

hr.UILine.base {
  margin: var(--padding-line);
}

hr.UILine.small {
  margin: var(--padding-line_small);
}

hr.UILine.large {
  margin: var(--padding-line-large);
}

/********************************      WebKit/widget:UILine:END   ********************************/
/********************************      WebKit/widget:UILink:START      ********************************/
a.UILink {
  color: var(--font-color);
  cursor: pointer;
}

a.UILink:hover {
  color: var(font-color-link_hover);
}

a.UILink[disabled],
a.UILink[disabled]:hover {
  cursor: default;
}

/** btnDelete:START (刪除圖示) **/
.UILink.btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f2ed";
  padding-left: calc(var(--padding-webkit) / 2);
  padding-right: calc(var(--padding-webkit) / 2);
}

/** btnDelete:END **/
/** facebook:START **/
.UILink.facebook, .UILink.facebook:hover,
.UITag.facebook {
  color: var(--color-facebook);
}

.UILink.facebook:before,
.UITag.facebook:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f39e";
  font-size: var(--font-size-icon-base);
}

/** facebook:END **/
/** line:START **/
.UILink.line, .UILink.line:hover,
.UITag.line {
  color: var(--color-line);
}

.UILink.line:before,
.UITag.line:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f3c0";
  font-size: var(--font-size-icon-base);
}

/** line:END **/
/** weixin:START **/
.UILink.weixin, .UILink.weixin:hover,
.UITag.weixin {
  color: var(--color-weixin);
}

.UILink.weixin:before,
.UITag.weixin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f1d7";
  font-size: var(--font-size-icon-base);
}

/** weixin:END **/
/** linkedin:START **/
.UILink.linkedin, .UILink.linkedin:hover,
.UITag.linkedin {
  color: var(--color-linkedin);
}

.UILink.linkedin:before,
.UITag.linkedin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0e1";
  font-size: var(--font-size-icon-base);
}

/** linkedin:END **/
/** youtube:START **/
.UILink.youtube, .UILink.youtube:hover,
.UITag.youtube {
  color: var(--color-youtube);
}

.UILink.youtube:before,
.UITag.youtube:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f167";
  font-size: var(--font-size-icon-base);
}

/** youtube:END **/
/** instagram:START **/
.UILink.instagram, .UILink.instagram:hover,
.UITag.instagram {
  color: var(--color-instagram);
}

.UILink.instagram:before,
.UITag.instagram:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f16d";
  font-size: var(--font-size-icon-base);
}

/** instagram:END **/
/** twitter:START **/
.UILink.twitter, .UILink.twitter:hover,
.UITag.twitter {
  color: var(--color-twitter);
}

.UILink.twitter:before,
.UITag.twitter:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f099";
  font-size: var(--font-size-icon-base);
}

/** twitter:END **/
/** weibo:START **/
.UILink.weibo, .UILink.weibo:hover,
.UITag.weibo {
  color: var(--color-weibo);
}

.UILink.weibo:before,
.UITag.weibo:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f18a";
  font-size: var(--font-size-icon-base);
}

/** weibo:END **/
/** phone:START **/
.UILink.phone, .UILink.weibo:phone,
.UITag.phone {
  color: var(--font-color);
}

.UILink.phone:before,
.UITag.phone:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2a0";
  font-size: var(--font-size-icon-base);
}

/** phone:END **/
/********************************      WebKit/widget:UILink:END      ********************************/
/********************************      WebKit/widget:UILinkButton:START      ********************************/
.UILinkButton {
  --background-color-link-button-file: rgba(46, 149, 128, 0.1);
  --background-color-link-button-file_untag: rgba(00, 00, 00, 0.1);
  --border-radius-link-button-file: 6px;
  --color-link-button-file: var(--color-secondary);
  --color-link-button-file_tag: var(--color-main);
  --color-link-button-file_untag: var(--color-gray);
  --font-color-link-button: #034c70;
  --font-color-link-button_hover: $font-color-link_hover;
  --font-color-link-button_disabled: $font-color-link_disabled;
  --padding-link-button-file: 3px 12px;
  --margin-link-button-file: 6px;
  --code-font-awesome-link-button-file: "";
}

.UILinkButton {
  color: var(--font-color-link-button);
  cursor: pointer;
  text-decoration: none;
}

.UILinkButton:hover {
  color: var(--font-color-link-button_hover);
}

.UILinkButton[disabled],
.UILinkButton[disabled]:hover {
  color: var(font-color-link-button_disabled);
  cursor: default;
}

/** file:START (連結路徑前面有檔案圖示) **/
.UILinkButton.file:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-link-button-file);
}

/** file:END **/
/** tag:START **/
.UILinkButton.tag {
  border-radius: var(--border-radius-link-button-file);
  -moz-border-radius: var(--border-radius-link-button-file);
  -webkit-border-radius: var(--border-radius-link-button-file);
  background-color: var(--background-color-link-button-file);
  color: var(--color-link-button-file);
  padding: var(--padding-link-button-file);
  margin-right: var(--margin-link-button-file);
}

.UILinkButton.tag:before {
  content: "#";
  padding-right: 3px;
}

.UILinkButton.tag[data-state=tag] {
  color: var(--color-link-button-file_tag);
}

.UILinkButton.tag[data-state=untag] {
  background-color: --background-color-link-button-file_untag;
  color: var(--color-link-button-file_untag);
}

/** tag:END **/
/********************************      WebKit/widget:UILinkButton:END      ********************************/
/********************************      WebKit/widget:UILoader:START      ********************************/
.UILoader.fill {
  height: 100%;
}

/********************************      WebKit/widget:UILoader:START      ********************************/
/********************************      WebKit/widget:UIMenu:START      ********************************/
.UIMenuWrapper {
  --color-menu-addon: #909090;
}

.UIMenuWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
  overflow: hidden;
}

.UIMenuWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  border-left: var(--border-color-light);
  line-height: var(--height-widget);
  padding: 0 calc(var(--padding-webkit) / 2);
  content: "\f0dc";
  position: absolute;
  top: 0;
  right: 0;
}

.UIMenuWrapper .UIMenu {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: none;
  background-image: none;
  border: none;
  cursor: pointer;
  padding: 0 calc(var(--padding-webkit) * 3) 0 var(--padding-webkit);
}

.UIMenuWrapper .UIMenu:disabled {
  color: var(--font-color_disabled);
}

.UIMenuWrapper > i {
  color: var(--color-menu-addon);
  position: absolute;
  top: 8px;
  right: 6px;
  z-index: 99;
}

/********************************      WebKit/widget:UIMenu:END      ********************************/
/********************************      WebKit/widget:UIMenuGroupWrapper:START      ********************************/
.UIMenuGroupWrapper {
  --background-color-menu_active: var(--color-main);
  --background-color-menu_disabled: #f2f5f8;
  --font-color-menu_active: #fff;
}

.UIMenuGroupWrapper .UIMenuGroup a {
  border: var(--border-color-light);
  display: inline-block;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
}

.UIMenuGroupWrapper .UIMenuGroup a.active {
  color: var(--font-color-menu_active);
  background-color: var(--background-color-menu_active);
}

.UIMenuGroupWrapper .UIMenuGroup a[disabled] {
  background-color: var(--background-color-menu_disabled);
  color: var(--font-color_disabled);
  cursor: default;
}

/********************************      WebKit/widget:UIMenuGroupWrapper:END      ********************************/
/********************************      WebKit/widget:UIRadio:START      ********************************/
.UIRadioWrapper {
  --background-color-radio: transparent;
  --background-color-radio_check: transparent;
  --background-image-data-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzIwIDI1NmMwIDg4LjQtNzEuNiAxNjAtMTYwIDE2MFMwIDM0NC40IDAgMjU2UzcxLjYgOTYgMTYwIDk2czE2MCA3MS42IDE2MCAxNjB6Ii8+PC9zdmc+");
  --border-color-radio: var(--color-main);
  --border-color-radio_check: var(--color-main);
  --border-radius-radio: 50%;
  --margin-radio: var(--margin-webkit);
  --margin-radio-label: var(--margin-webkit);
}

.UIRadioWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
  margin-right: var(--margin-radio);
}

.UIRadioWrapper input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--border-radius-radio);
  -moz-border-radius: var(--border-radius-radio);
  -webkit-border-radius: var(--border-radius-radio);
  background-color: var(--background-color-radio);
  border: 1px solid var(--border-color-radio);
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.UIRadioWrapper input[type=radio]:checked {
  background-color: var(--background-color-radio_check);
  background-image: var(--background-image-data-radio);
  border: 1px solid var(--border-color-radio_check);
}

.UIRadioWrapper > span {
  margin-left: var(--margin-radio-label);
}

/********************************      WebKit/widget:UIRadio:END      ********************************/
/********************************      WebKit/widget:UIScanner:START      ********************************/
.UIScanner {
  --border-color-scanner: var(--border-color-light);
  --font-size-scanner-switch: 18px;
  --font-size-scanner-control-button: 18px;
}

.UIScanner {
  border: var(--border-color-scanner);
  position: relative;
  overflow: hidden;
}

.UIScanner > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.UIScanner > #video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.UIScanner > #switch {
  display: none;
  font-size: var(--font-size-scanner-switch);
  position: absolute;
  left: 6px;
  bottom: 6px;
}

.UIScanner > #start,
.UIScanner > #stop {
  display: none;
  font-size: var(--font-size-scanner-control-button);
  position: absolute;
  right: 6px;
  bottom: 6px;
}

/********************************      WebKit/widget:UIScanner:END      ********************************/
/********************************      WebKit/widget:UISearch:START    ********************************/
.UISearchWrapper {
  --size-search: 36px;
  --code-font-awesome-search: "";
}

.UISearchWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
}

.UISearchWrapper > .UISearch {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
}

.UISearchWrapper .UISearch[readonly] {
  background-color: transparent;
  opacity: 1;
}

.UISearchWrapper .UISearch:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
  opacity: 1;
}

.UISearchWrapper > button {
  background-color: transparent;
  border: none;
  color: #bababa;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.UISearchWrapper > button i {
  cursor: pointer;
  display: block;
  width: var(--size-search);
  height: var(--size-search);
}

.UISearchWrapper > button i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: var(--code-font-awesome-search);
  line-height: var(--size-search);
}

/********************************      WebKit/widget:UISearch:END    ********************************/
/********************************      WebKit/widget:UIShareButton:START      ********************************/
.UIShareButton {
  --background-color-share-button: transparent;
  --background-color-share-icon: #fff;
  --border-color-share-icon: var(--border-color-light);
  --color-share-button: var(--color-main);
  --padding-share-button: 3px 6px;
  --padding-share-icon: 0px 12px;
  --code-font-awesome-share-button: "";
}

.UIShareButton {
  background-color: var(--background-color-share-button);
  color: var(--color-share-button);
  padding: var(--padding-share-button);
  height: auto;
}

.UIShareButton:hover, .UIShareButton:focus {
  background-color: var(--background-color-share-button);
  color: var(--color-share-button);
}

.UIShareButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: var(--code-font-awesome-share-button);
}

.shareIcon {
  background-color: var(--background-color-share-icon);
  border: var(--border-color-share-icon);
  display: none;
  padding: var(--padding-share-icon);
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 9999;
}

.shareIcon .UILink:before {
  font-size: 24px !important;
  margin-right: 6px;
}

/********************************      WebKit/widget:UIShareButton:END      ********************************/
/********************************      WebKit/widget:UISignature:START   ********************************/
.UISignatureWrapper {
  --border-signature: var(--border-color-light);
  --font-size-signature-button: 24px;
  --padding-signature-button: var(--padding-webkit) var(--padding-layout);
}

.UISignatureWrapper {
  border: var(--border-signature);
  display: inline-block;
  position: relative;
}

.UISignatureWrapper .UIButtonGroup {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  position: absolute;
  right: 3px;
  bottom: 3px;
}

.UISignatureWrapper .UIButtonGroup .UILink {
  display: inline-block;
  padding: var(--padding-signature-button);
}

.UISignatureWrapper .UIButtonGroup .btnClear:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-signature-button);
  content: "\f057";
}

.UISignatureWrapper .UIButtonGroup .btnOk:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-signature-button);
  content: "\f058";
}

/********************************      WebKit/widget:UISignature:END   ********************************/
/********************************      WebKit/widget:UISwitch:START   ********************************/
.UISwitchWrapper {
  --background-color-switch: transparent;
  --background-color-switch_check: transparent;
  --background-image-data-switch: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMi40LjUgLS0+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJwYXRoMSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIiBvcGFjaXR5PSIwLjUwMTU0NCIgZD0iTSAyNTYgNDg4IEMgMzg0LjE0MzczOCA0ODggNDg4IDM4NC4xNDM3MzggNDg4IDI1NiBDIDQ4OCAxMjcuODU2MjYyIDM4NC4xNDM3MzggMjQgMjU2IDI0IEMgMTI3Ljg1NjI0NyAyNCAyNCAxMjcuODU2MjYyIDI0IDI1NiBDIDI0IDM4NC4xNDM3MzggMTI3Ljg1NjI0NyA0ODggMjU2IDQ4OCBaIi8+CiAgICA8dGV4dCBpZD0idGV4dDEiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjYzNCIgeT0iODAzIiBmb250LWZhbWlseT0iS2FpdGkgVEMiIGZvbnQtc2l6ZT0iMTIwIiBmaWxsPSIjMDAwMDAwIj7mloflrZc8L3RleHQ+Cjwvc3ZnPgo=");
  --background-image-data-switch_check: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMi40LjUgLS0+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJwYXRoMSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIiBkPSJNIDI1NiA0ODggQyAzODQuMTQzNzM4IDQ4OCA0ODggMzg0LjE0MzczOCA0ODggMjU2IEMgNDg4IDEyNy44NTYyNjIgMzg0LjE0MzczOCAyNCAyNTYgMjQgQyAxMjcuODU2MjQ3IDI0IDI0IDEyNy44NTYyNjIgMjQgMjU2IEMgMjQgMzg0LjE0MzczOCAxMjcuODU2MjQ3IDQ4OCAyNTYgNDg4IFoiLz4KICAgIDx0ZXh0IGlkPSJ0ZXh0MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeD0iNjM0IiB5PSI4MDMiIGZvbnQtZmFtaWx5PSJLYWl0aSBUQyIgZm9udC1zaXplPSIxMjAiIGZpbGw9IiMwMDAwMDAiPuaWh+WtlzwvdGV4dD4KPC9zdmc+Cg==");
  --border-color-switch: var(--color-gray);
  --border-color-switch_check: var(--color-main);
  --border-radius-switch: 2em;
  --opacity-switch: 0.7;
  --margin-switch: var(--margin-webkit);
  --margin-switch-label: calc(var(--margin-webkit) / 2);
}

.UISwitchWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
  margin-right: var(--margin-switch);
}

.UISwitchWrapper input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--border-radius-switch);
  -moz-border-radius: var(--border-radius-switch);
  -webkit-border-radius: var(--border-radius-switch);
  /* 設定所有樣式變更都有轉場效果 */
  transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  background-color: var(--background-color-switch);
  background-image: var(--background-image-data-switch);
  border: 1px solid var(--border-color-switch);
  opacity: var(--opacity-switch);
  width: 2em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  cursor: pointer;
}

.UISwitchWrapper input[type=checkbox]:checked {
  background-color: var(--background-color-switch_check);
  background-image: var(--background-image-data-switch_check);
  border: 1px solid var(--border-color-switch_check);
  opacity: 1;
  background-position: right center;
}

.UISwitchWrapper > span {
  margin-left: var(--margin-switch-label);
}

/********************************      WebKit/widget:UISwitch:END   ********************************/
/********************************      WebKit/widget:UIText:START      ********************************/
.UITextWrapper {
  --height-text_in_table: 26px;
  --border-text-webhint: 1px solid var(--color-secondary);
  --min-width-text: 52px;
}

.UITextWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
  min-width: var(--min-width-text);
}

.UITextWrapper > .UIText {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
  padding: 0.375rem 0.475rem;
}

.UITextWrapper > .UIText:focus {
  border: 0;
}

.UITextWrapper > .UIText:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UITextWrapper > .UIText[readonly] {
  background-color: var(--background-color_readonly);
  opacity: 0.9;
}

.UITextWrapper i {
  font-size: var(--font-size-icon-input);
}

.UITextWrapper.input-group { /* 設定最小寬度，避免內容掉下來 */
  min-width: 68px;
}

.UITextWrapper.input-group .input-group-text {
  background-color: var(--transparent);
  border: 0;
  height: 100%;
}

/* 數字輸入盒 */
.UITextWrapper.input-group .UIText.number {
  text-align: center;
}

.UITextWrapper.input-group .input-group-text.minus,
.UITextWrapper.input-group .input-group-text.plus {
  cursor: pointer;
}

/* 標籤樣式輸入盒 */
.UITextWrapper.label {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
  border: 0;
  border-bottom: var(--border-color-light);
  display: inline-block;
  height: 24px;
}

.UITextWrapper.label .UIText {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
  min-width: initial;
  padding-left: calc(var(--padding-webkit) / 6);
  padding-right: calc(var(--padding-webkit) / 6);
}

.UITextWrapper.label .UIText:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UITextWrapper.label + .UILabel {
  line-height: 24px;
}

/* Floating labels */
.UITextWrapper.form-floating > label {
  color: var(--font-color-subtitle);
  padding: 0.75rem 0.75rem;
}

.UITextWrapper.form-floating > .form-control {
  min-height: initial; /* 修正bootstrap 樣式問題*/
}

.UITextWrapper.form-floating > .form-control:not(:-moz-placeholder) ~ label {
  color: var(--font-color-title);
  opacity: 0.8;
}

.UITextWrapper.form-floating > .form-control:focus ~ label,
.UITextWrapper.form-floating > .form-control:not(:placeholder-shown) ~ label,
.UITextWrapper.form-floating > .form-select ~ label {
  color: var(--font-color-title);
  opacity: 0.8;
}

.UITextWrapper.form-floating > .form-control:not(:-moz-placeholder) ~ label::after {
  background-color: transparent;
}

.UITextWrapper.form-floating > .form-control-plaintext ~ label::after,
.UITextWrapper.form-floating > .form-control:focus ~ label::after,
.UITextWrapper.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.UITextWrapper.form-floating > .form-select ~ label::after {
  background-color: transparent;
}

/* 單位輸入盒 */
.UITextWrapper.unit > .UIText {
  padding: 0;
  padding-left: calc(var(--padding-webkit) / 2);
}

.UITextWrapper.unit > .UIText[readonly] {
  background-color: transparent;
}

/* DataBinder.markById標記 */
.UITextWrapper > .UIText.webhint {
  border: var(--border-text-webhint);
}

.UIDataTable tbody .UIDataColumn .UITextWrapper,
.UIPaginatedDataTable tbody .UIDataColumn .UITextWrappert {
  height: var(--height-text_in_table);
}

/* UIDataTable -> UITextWrapper */
.UIDataTable tbody .UIDataColumn .UITextWrapper.input-group .input-group-text,
.UIPaginatedDataTable tbody .UIDataColumn .UITextWrapper.input-group .input-group-text {
  padding: 0.375rem 0.375rem;
}

/********************************      WebKit/widget:UIText:END      ********************************/
/********************************      WebKit/widget:UITextarea:START      ********************************/
.UITextareaWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
}

.UITextareaWrapper > .UITextarea {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  resize: both;
}

.UITextareaWrapper > .UITextarea:disabled,
.UITextareaWrapper > .UITextarea[readonly] {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

/********************************      WebKit/widget:UITextarea:END      ********************************/
/********************************      WebKit/widget:UITexMenu:START      ********************************/
.UITextMenuWrapper > .UIMenu {
  border: 0;
  width: calc(100% - 32px) !important;
  height: 100%;
  padding: 0 8px;
  position: absolute;
  left: 0px;
}

/********************************      WebKit/widget:UITexMenu:END      ********************************/
/********************************      WebKit/widget:UITime:START      ********************************/
.UITimeWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
}

.UITimeWrapper > .UITime {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
}

.UITimeWrapper > .UITime:disabled,
.UITimeWrapper > .UITime[readonly] {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UITimeWrapper i {
  font-size: var(--font-size-icon-input);
}

.UITimeWrapper.input-group .input-group-text {
  background-color: var(--transparent);
  border: 0;
  height: 100%;
}

/********************************      WebKit/widget:UITime:END      ********************************/
/********************************      WebKit/widget:UITree:START  (未整理)     ********************************/
.UITree .UITreeNode[disabled=true],
.UITree .UITreeNode[disabled=disabled] {
  color: #eee;
}

/********************************      WebKit/widget:UITree:END  (未整理)     ********************************/
/********************************      WebKit/chart:UIBarChart  (未整理)     ********************************/
.UIBarChart {
  --border-bar-char: var(--border-color-dark);
  --padding-bar-char: 3px;
}

.UIBarChart .legend > div {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: var(border-bar-char);
  padding: var(--padding-bar-char);
}

.UIBarChart .legend > table td {
  padding: 2px 3px;
}

.UIBarChart #flotTip {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: var(--border-color-dark);
  padding: 12px;
  opacity: 0.95;
}

/********************************      WebKit/chart:UILineChart  (未整理)     ********************************/
.UILineChart .legend > div {
  padding: 3px;
  border-radius: 5px;
  border: 2px solid #f0f0f0;
}

.UILineChart .legend > table {
  padding: 6px;
}

.UILineChart .legend > table td {
  padding: 2px 3px;
}

.UILineChart .valueLabels {
  font-size: 70%;
  color: black;
}

.UILineChart div.valueLabelLight {
  opacity: 0.5;
  background-color: white;
  border: none;
  position: absolute;
}

.UILineChart div.valueLabel {
  position: absolute;
  border: none;
}

.UILineChart #flotTip {
  border: 2px solid #eee;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.95;
}

/********************************      WebKit/chart:UIOrganizationChar:START     ********************************/
.UIOrganizationChart {
  overflow: auto;
}

.UIOrganizationChart .orgchart {
  background-image: none;
  position: relative;
}

.UIOrganizationChart .orgchart .node .title {
  background-color: rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .node .title .symbol {
  margin-top: 14px;
  margin-left: 6px;
}

.UIOrganizationChart .orgchart .node .content {
  border: 1px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .topLine {
  border-top: 2px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .rightLine {
  border-right: 1px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .leftLine {
  border-left: 1px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .downLine {
  background-color: rgba(45, 120, 223, 0.8);
}

/********************************      WebKit/chart:UIOrganizationChar:END     ********************************/
/********************************      webkit-tooltip:START    ********************************/
.tooltip-inner {
  --font-size-tooltip: var(--font-size-base);
  --padding-tooltip: 0 4px;
  --padding-tooltip-icon: 0 4px;
}

/* 修正Bootstrap Tooltip文字靠左對齊*/
.tooltip-inner {
  text-align: left;
}

.UIForm .UIFormItem > th > i.tooltip-icon {
  font-size: var(--font-size-tooltip);
  padding: var(--padding-tooltip);
}

.UIDataTable th > i.tooltip-icon {
  font-size: 12px;
  padding: var(--padding-tooltip-icon);
}

.UIPanel .caption > i.tooltip-icon {
  padding: var(--padding-tooltip-icon);
}

/********************************      webkit-tooltip:START    ********************************/
/********************************      Validator:START   (未整理)    ********************************/
.error {
  border-bottom: 1px solid #ff1f1f !important;
}

input[type=checkbox].error:before {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #ff1f1f;
  content: "";
  display: block;
  position: relative;
  width: 11px;
  height: 11px;
}

input[type=radio].error:before {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border: 1px solid #ff1f1f;
  content: "";
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: -1px;
  margin-left: -1px;
}

.errorMessage {
  color: #ff1f1f;
  display: block;
  font-size: 0.8em;
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 9999;
}

/********************************      Validator:END   (未整理)    ********************************/
/********************************      組合樣式修正:START      ********************************/
.UIPanel > .content .UIPanel {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.UIPanel > .UIPanelBottom .UIButton {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .UIPanel > .UIPanelBottom .UIButton {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.UIPanel > .content + .UITabHost {
  margin-top: -12px;
}

/*
.UIPanel > .content > .UIDataTable
    ,.UIPanel > .content > .UIPaginatedDataTable
    ,.UIPanel > .content > .UIPaginatedRepeater {

    margin-left: (0 - calc($padding-layout - 3px));
    margin-right: (0 - calc($padding-layout - 3px));
}

.UIPanel.minor > .content > .UIDataTable
    ,.UIPanel.minor > .content > .UIPaginatedDataTable
    ,.UIPanel.minor > .content > .UIPaginatedRepeater {

    margin-left: (0 - calc($padding-webkit - 3px));
    margin-right: (0 - calc($padding-webkit - 3px));

    @media (max-width: 768px) {
        margin-left: (0 - calc($padding-webkit - 2px));
        margin-right: (0 - calc($padding-webkit - 2px));
    }
}

.UIPanel.noBorder > .content > .UIDataTable
    ,.UIPanel.noBorder > .content > .UIPaginatedDataTable
    ,.UIPanel.noBorder > .content > .UIPaginatedRepeater {

    margin: 0px 0px;
} */
/* 設定在UIForm裡Icon的大小 */
.UIForm .UIFormItem i {
  font-size: 14px;
  line-height: 20px;
}

/* UIVerticalAccordion .content -> UIPanel */
.UIVerticalAccordion > .UIAccordionItem > .content > .UIPanel {
  margin: -12px -24px;
}

/* UIDataTable -> UIButton */
.UIDataTable tbody .UIDataColumn .UIButton,
.UIPaginatedDataTable tbody .UIDataColumn .UIButton {
  height: 24px;
}

/********************************      組合樣式修正:END      ********************************/
/********************************      屬性定義:START      ********************************/
#company_image_main {
  --background-color-company-image-item: #000;
  --background-color-company-image-item-info: #000;
  --background-color-company-image-item-delete: #fff;
  --border-radius-company-image-item-delete: 12px;
  --object-fit-company-image-item-image: contain;
  --font-color-company-image-item-info: #fff;
  --font-color-company-image-item-delete: #000;
  --font-size-company-image-item-info: 0.7rem;
  --font-weight-company-image-item-info: 800;
  --padding-company-image-item: 3px;
  --padding-company-image-item-info: 3px;
}

#media_manager {
  --background-color-company-image-delete: #fff;
  --border-radius-company-image-delete: 12px;
  --color-company-image-delete: #000;
}

/********************************      屬性定義:END      ********************************/
/********************************      功能樣式定義:START      ********************************/
/************      company_image_main.dwp:START      ************/
#company_image_main .item {
  background-color: var(--background-color-company-image-item);
  position: relative;
  width: 100%;
  padding: var(--padding-company-image-item);
}

#company_image_main .item .UIImage {
  -o-object-fit: var(--object-fit-company-image-item-image);
     object-fit: var(--object-fit-company-image-item-image);
  min-width: 100%;
  height: 16vw;
}

#company_image_main .item .info {
  background-color: var(--background-color-company-image-item-info);
  color: var(--font-color-company-image-item-info);
  font-size: var(--font-size-company-image-item-info);
  font-weight: var(--font-weight-company-image-item-info);
  width: 100%;
  opacity: 0.8;
  padding: var(--padding-company-image-item-info);
  position: absolute;
  top: 0;
  left: 0;
}

#company_image_main .item .btnDelete {
  border-radius: var(--border-radius-company-image-item-delete);
  -moz-border-radius: var(--border-radius-company-image-item-delete);
  -webkit-border-radius: var(--border-radius-company-image-item-delete);
  background-color: var(--background-color-company-image-item-delete);
  color: var(--font-color-company-image-item-delete);
  position: absolute;
  right: 12px;
  bottom: 12px;
}

#company_image_main .item .btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2ed";
}

/************      company_image_main.dwp:END      ************/
/************      media_manager.dwp:START      ************/
#media_manager {
  padding: 0 var(--padding-webkit);
}

#media_manager .picture {
  position: relative;
}

#media_manager .picture .UIImage {
  -o-object-fit: cover;
     object-fit: cover;
  min-width: 100%;
  height: 18vw;
  margin-bottom: 3px;
}

#media_manager .picture .btnDelete {
  border-radius: var(--border-radius-company-image-delete);
  -moz-border-radius: var(--border-radius-company-image-delete);
  -webkit-border-radius: var(--border-radius-company-image-delete);
  color: var(--color-company-image-delete);
  background-color: var(--background-color-company-image-delete);
  position: absolute;
  right: 12px;
  bottom: 12px;
}

#media_manager .picture .btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2ed";
}

/************      media_manager.dwp:END      ************/
/********************************      功能樣式定義:END      ********************************/
/********************************      codeScanner: START      ********************************/
#codeScanner {
  display: none;
}

.codeScanner.barcode, .codeScanner.barcode > td {
  position: relative;
}

.codeScanner.barcode #productSkuCodeW {
  width: 100% !important;
}

.codeScanner.barcode #scanner {
  width: initial !important;
  position: absolute;
  right: 16px;
  top: 8px;
}

.codeScanner.barcode #scanner:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f464";
  color: #08b;
  font-size: 24px;
}

/********************************      codeScanner: END      ********************************/
/********************************      屬性定義:START      ********************************/
#login {
  --background-color-login-wrapper: #000;
  --background-color-login-bottom: #f8f8f8;
  --background-image-login: none;
  --font-color-login-bottom: #484848;
  --font-color-login-copyright: #ababab;
  --width-login-panel: 360px;
  --height-login-logo: 48px;
  --height-login-input: 42px;
}

/********************************      屬性定義:END      ********************************/
/********************************      login.dwp:START      ********************************/
#login #wrapper {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  background-color: var(--background-color-login-wrapper);
  background-image: var(--background-image-login);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100%;
  min-height: 100%;
}

#login #loginView.UIPanel {
  width: var(--width-login-panel);
}

#login #loginView.UIPanel > .content {
  padding: var(--padding-layout) calc(var(--padding-layout) * 2);
}

#login #loginView.UIPanel .UIPanelBottom {
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  background: var(--background-color-login-bottom);
  color: var(--font-color-login-bottom);
}

#login #loginView #logoView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: row;
  margin: var(--margin-layout) 0 calc(var(--margin-layout) * 1.5) 0;
}

#login #loginView #logoView .logo .UIImage {
  height: var(--height-login-logo);
  margin-right: var(--margin-webkit);
}

#login #loginView #logoView .name {
  font-size: var(--font-size-largest);
  line-height: 48px;
}

#login #loginView .UITextWrapper {
  height: var(--height-login-input);
}

#login #copyrightView {
  color: var(--font-color-login-copyright);
  font-size: var(--font-size-least);
  font-weight: 300;
  text-align: center;
  margin: 0px auto 10px;
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
}

/********************************      login.dwp:END      ********************************/
/********************************      language_selected.dwp:START      ********************************/
#language_selected .UILinkButton {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border: var(--border-color-light);
  display: block;
  text-align: center;
  padding: calc(var(--padding-webkit) / 2);
  margin-bottom: var(--margin-webkit);
}

#language_selected .UILinkButton:hover {
  background-color: var(--color-main);
  color: var(--font-color-white);
}

/********************************      language_selected.dwp:END      ********************************/
/********************************      屬性定義:START      ********************************/
#index {
  --background-color-index: #fff;
  --background-color-index-header: #fff;
  --background-color-index-header-message: #b94a48;
  --background-color-index-header-message_disabled: #1c1c1c;
  --background-color-index-sidebar: #fff;
  --background-color-index-sidebar-widget: #fff;
  --background-color-index-sidebar-nav-title: #eee;
  --background-color-index-breadcrumb: #f1f3f5;
  --border-color-index-header: var(--border-color-light);
  --border-color-index-sidebar: var(--border-color-light);
  --border-color-index-sidebar-info: var(--border-color-light);
  --font-color-index-header-message-label: var(--font-color);
  --font-color-index-header-logout: var(--color-main);
  --font-color-index-header-nav-label: #47494d;
  --font-color-index-sidebar-info: var(--font-color);
  --font-color-index-sidebar-widget: var(--font-color);
  --font-color-index-sidebar-widget-title: var(--font-color-hint);
  --font-color-index-sidebar-widget-data: #fff;
  --font-color-index-sidebar-widget-icon: var(--color-secondary);
  --font-color-index-sidebar-nav-title: var(--font-color);
  --font-color-index-sidebar-nav-item: var(--font-color-black);
  --font-color-index-sidebar-nav-item-icon: var(--color-main);
  --font-size-index-sidebar-widget: var(--font-size-smaller);
  --font-size-index-sidebar-widget-title: var(--font-size-least);
  --font-size-index-sidebar-widget-data: var(--font-size-least);
  --font-size-index-sidebar-widget-button: var(--font-size-small);
  --font-size-index-sidebar-nav-title: var(--font-size-smaller);
  --width-index-sidebar: 220px;
  --width-index-helper: 420px;
  --height-index-header: 58px;
  --height-index-header_closed: 38px;
  --height-index-sidebar-info: 58px;
  --height-index-sidebar-logo: 36px;
  --height-index-sidebar-widget-button: 24px;
}

/********************************      屬性定義:END      ********************************/
/********************************      wrapper:START      ********************************/
/********************************      wrapper:END      ********************************/
/********************************      index.dwp:START      ********************************/
#index #wrapper {
  display: flex;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  background-color: var(--background-color-index);
  height: 100%;
  min-height: 100%;
}

#index #wrapper #contentView {
  position: relative;
  margin-left: var(--width-index-sidebar);
  height: 100%;
}
@media (max-width: 768px) {
  #index #wrapper #contentView {
    margin-left: 0;
    overflow: visible;
  }
}

#index #wrapper #contentView #centerView {
  flex-grow: 1;
  height: calc(100% - var(--height-index-header));
}

#index #wrapper #contentView .arrowLeft {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  background-color: var(--background-color-index-header);
  border: var(--border-color-light);
  border-top: none;
  border-right: none;
  width: 24px;
  height: var(--height-index-header);
  padding: 0 calc(var(--padding-webkit) / 2);
  position: absolute;
  top: 0;
  left: 0;
}

#index #wrapper #contentView .arrowLeft:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  line-height: var(--height-index-header);
  content: "\f104";
  font-size: 22px;
}

#index #wrapper #contentView #centerView #mainView {
  padding: var(--padding-layout);
}
@media (max-width: 768px) {
  #index #wrapper #contentView #centerView #mainView {
    padding: var(--padding-layout) calc(var(--padding-layout) / 2);
  }
}

#index #wrapper #helperView {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background-color: #fff;
  display: none;
  width: var(--width-index-helper);
  height: 95%;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
}

/********************************      index.dwp:END      ********************************/
/********************************      index.dwp/closed:START      ********************************/
#index #wrapper.closed #sidebarView {
  display: none;
}

#index #wrapper.closed #contentView {
  margin-left: 0;
}

#index #wrapper.closed #contentView .arrowLeft {
  height: var(--height-index-header_closed);
}

#index #wrapper.closed #contentView .arrowLeft::before {
  line-height: var(--height-index-header_closed);
  content: "\f105";
}

#index #wrapper.closed #contentView #centerView {
  height: calc(100% - var(--height-index-header_closed));
}

#index #wrapper.closed #contentView #centerView #breadcrumbView {
  display: none;
}

#index #wrapper.closed #sidebarView > .siteInfo > .logo,
#wrapper.closed #sidebarView > .siteInfo > .name,
#wrapper.closed #sidebarView .siteBody {
  display: none;
}
@media (max-width: 768px) {
  #index #wrapper.closed #sidebarView > .siteInfo > .logo,
  #wrapper.closed #sidebarView > .siteInfo > .name,
  #wrapper.closed #sidebarView .siteBody {
    display: block;
  }
}

#index #wrapper.closed #headerView {
  height: var(--height-index-header_closed);
}

#index #wrapper.closed #headerView .headerLeft .profile .avatar .photo {
  width: 24px;
  height: 24px;
}

#index #wrapper.closed #headerView .headerLeft .profile .avatar .company {
  display: none;
}

#index #wrapper.closed #headerView > .headerRight .UILabel {
  display: none;
}

/* 取消系統客服 */
#index #wrapper.closed ~ .UITabBar.contactPlatform {
  display: none;
}

/********************************      index.dwp/closed:END      ********************************/
/********************************      index.dwp/sidebarView:START      ********************************/
#index #sidebarView {
  background-color: var(--background-color-index-sidebar);
  border-right: var(--border-color-index-sidebar);
  width: var(--width-index-sidebar);
  height: 100%;
  position: absolute;
  top: 0;
}

#index #sidebarView > .UIScrollGroup {
  height: calc(100% - var(--height-index-header));
  overflow-y: auto;
}

/** siteInfo:START **/
#index #sidebarView > .siteInfo {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  border-bottom: var(--border-color-index-sidebar-info);
  height: var(--height-index-sidebar-info);
  position: relative;
  padding-left: var(--padding-layout);
}

#index #sidebarView > .siteInfo > .logo {
  padding: 0 var(--padding-webkit);
}

#index #sidebarView > .siteInfo > .logo .UIImage {
  cursor: pointer;
  height: var(--height-index-sidebar-logo);
}

#index #sidebarView > .siteInfo > .name {
  color: var(--font-color-index-sidebar-info);
  font-size: var(--font-size-large);
  line-height: 32px;
}

/** siteInfo:END **/
/** siteWidget: START **/
#index #sidebarView .siteWidget .widget .caption {
  background-color: var(--background-color-index-sidebar-widget);
  color: var(--font-color-index-sidebar-widget);
  display: block;
  height: initial;
  font-size: var(--font-size-index-sidebar-widget);
  padding: calc(var(--padding-webkit) / 4) var(--padding-webkit);
}

#index #sidebarView .siteWidget .widget .content {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding: calc(var(--padding-webkit) / 1.5) var(--padding-layout);
}

#index #sidebarView .siteWidget .widget i {
  color: var(--font-color-index-sidebar-widget-icon);
  padding-right: var(--padding-webkit);
}

#index #sidebarView .siteWidget .widgetControl {
  text-align: center;
  padding: 0 var(--padding-layout) var(--padding-webkit) var(--padding-layout);
}

#index #sidebarView .siteWidget .widgetControl .UIButton {
  height: var(--height-index-sidebar-widget-button);
  line-height: var(--height-index-sidebar-widget-button);
  font-size: var(--font-size-index-sidebar-widget-button);
  width: 80%;
}

/** siteWidget: END **/
/** siteNav: START **/
#index #sidebarView .siteNav {
  padding-bottom: var(--padding-layout);
}

#index #sidebarView .siteNav .title {
  background-color: var(--background-color-index-sidebar-nav-title);
  color: var(--font-color-index-sidebar-nav-title);
  display: block;
  width: 100%;
  font-size: var(--font-size-index-sidebar-nav-title);
  padding: calc(var(--padding-webkit) / 4) var(--padding-webkit);
}

#index #sidebarView .siteNav .UIVerticalNavigation > .menu ul a {
  color: var(--font-color-index-sidebar-nav-item);
}

#index #sidebarView .siteNav .UIVerticalNavigation > .menu ul a > i {
  color: var(--font-color-index-sidebar-nav-item-icon);
}

/* 設定後畫線才不會有問題 */
#index #sidebarView .siteNav .UIVerticalNavigation > .menu ul li.level1 {
  border-bottom: var(--border-color-translucent);
}

/* 第一層且有子選單:START */
#index #sidebarView .siteNav .UIVerticalNavigation > .menu .submenu.level1 > a {
  position: relative;
}

/*
#index #sidebarView .siteNav .principal {
    padding: 0 24px;
    margin-bottom: 6px;
}

#index #sidebarView .siteNav .principal {
    padding: 0 24px;
    margin-bottom: 6px;
}*/
/** siteNav: END **/
/********************************      index.dwp/sidebarView:EMD      ********************************/
/********************************      index.dwp/headerView:START      ********************************/
#index #headerView {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: var(--background-color-index-header);
  border-bottom: var(--border-color-index-header);
  height: var(--height-index-header);
  padding-left: var(--padding-layout);
}
@media (max-width: 768px) {
  #index #headerView {
    padding-left: calc(var(--padding-layout) / 2);
  }
}

#index #headerView ul {
  display: table;
  height: 100%;
}

#index #headerView ul li {
  display: table-cell;
  vertical-align: middle;
}

#index #headerView ul li .UILink {
  padding: 0 calc(var(--padding-webkit) * 1.5);
}
@media (max-width: 768px) {
  #index #headerView ul li .UILink {
    padding: 0 var(--padding-webkit);
  }
}

/** headerLeft:START **/
#index #headerView .headerLeft {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
}

#index #headerView .headerLeft .UINavToggle {
  width: 32px;
  height: 32px;
  line-height: 32px;
}

#index #headerView .headerLeft .profile .dropdown-menu {
  min-width: 200px;
}

#index #headerView .headerLeft .profile .avatar {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
}

#index #headerView .headerLeft .profile .avatar .photo {
  width: 42px;
  height: 42px;
  margin-right: var(--margin-webkit);
}

#index #headerView .headerLeft .profile .avatar .company {
  font-size: var(font-size-small);
  color: var(font-color-title);
  text-align: left;
}

#index #headerView .headerLeft .profile .avatar .company .storeName {
  color: var(--font-color-subtitle);
}
@media (max-width: 768px) {
  #index #headerView .headerLeft .profile .avatar .company .storeName {
    font-size: var(--font-size-least);
  }
}

#index #headerView .headerLeft .profile .avatar .nickname {
  font-size: var(--font-size-small);
  color: var(--font-color-hint);
  text-align: left;
}

#index #headerView .headerLeft .profile .avatarInfo {
  text-align: center;
}

#index #headerView .headerLeft .profile .avatarInfo .UIImage {
  width: 96px;
  height: 96px;
  margin: var(--margin-webkit) 0;
}

#index #headerView .headerLeft .profile .avatarInfo .mail {
  color: var(--font-color);
  display: block;
  font-size: 0.8rem;
  padding: calc(var(--padding-webkit) / 2);
}

#index #headerView .headerLeft .profile .avatarInfo .mail:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0e0";
}

#index #headerView .headerLeft .profile .btnProfileEdit:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f007";
}

#index #headerView .headerLeft .profile .btnFontSetting:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f031";
}

#index #headerView .headerLeft .profile .btnLogout:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2f5";
}

/** headerLeft:END **/
/** headerRight:START **/
#index #headerView .rightLeft {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
}

#index #headerView > .headerRight i {
  color: var(--font-color-index-header-nav-label);
  font-size: 24px;
  padding-top: calc(var(--padding-webkit) / 2);
  /* 手機版:START */
  /* 手機版:END */
}
@media (max-width: 768px) {
  #index #headerView > .headerRight i {
    font-size: 18px;
  }
}

#index #headerView > .headerRight .UILabel {
  display: block;
  text-align: center;
  font-size: var(--font-size-least);
}

#index #headerView > .headerRight .message {
  position: relative;
}

#index #headerView > .headerRight .message #messageCount {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: var(--background-color-index-header-message);
  color: var(--font-color-index-header-message-label);
  font-size: var(--font-size-small);
  padding: 2px 6px;
  line-height: 14px;
  position: absolute;
  right: 10px;
  top: 3px;
  /* 手機版:START */
  /* 手機版:END */
}
@media (max-width: 768px) {
  #index #headerView > .headerRight .message #messageCount {
    font-size: var(--font-size-least);
    padding: 1px 3px;
    line-height: 10px;
    top: 10px;
  }
}

#index #headerView > .headerRight .message #messageCount[disabled] {
  background-color: var(--background-color-index-header-message_disabled);
}

#index #headerView > .headerRight .logout {
  border-left: var(--border-color-light);
  color: var(--font-color-index-header-logout);
}

#index #headerView > .headerRight .logout i {
  color: var(--font-color-index-header-logout);
}

/** headerRight:END **/
/********************************      index.dwp/headerView:END      ********************************/
/********************************      index.dwp/breadcrumbView:START      ********************************/
#index #breadcrumbView {
  position: relative;
  background-color: var(--background-color-index-breadcrumb);
}

#index #breadcrumbView .UINavBar {
  font-size: var(--font-size-smaller);
  padding: calc(var(--padding-webkit) / 2) var(--padding-layout);
  margin-bottom: 0;
}

#index #breadcrumbView .UINavBar .UINavBarExt {
  padding-right: 80px;
}

/********************************      index.dwp/breadcrumbView:END      ********************************/
/********************************      屬性定義:START      ********************************/
#account_lock {
  --background-color-lock-text: #e1e1e1;
  --background-color-lock-button: #e1e1e1;
}

/********************************      屬性定義:END      ********************************/
/********************************      font_size_setting:START      ********************************/
#font_size_setting.fontSize .fs {
  border-bottom: var(--border-color-light);
  display: block;
  padding-bottom: calc(var(--padding-webkit) / 2);
  margin-bottom: var(--margin-webkit);
}

#font_size_setting.fontSize .fs .UILinkButton {
  padding-right: var(--margin-webkit);
}

#font_size_setting.fontSize .fs .UILinkButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f031";
  padding-right: 3px;
}

#font_size_setting.fontSize .fs4 {
  font-size: 12px;
}

#font_size_setting.fontSize .fs5 {
  font-size: 14px;
}

#font_size_setting.fontSize .fs6 {
  font-size: 16px;
}

#font_size_setting.fontSize .fs7 {
  font-size: 18px;
}

#font_size_setting.fontSize .fs8 {
  font-size: 20px;
}

/********************************      font_size_setting:END      ********************************/
/********************************      account_lock:START      ********************************/
#account_lock {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  background-color: rgba(0, 0, 0, 0.88);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
}

#account_lock .UIForm {
  width: 320px !important;
  height: 360px;
}

#account_lock .UIForm .UIFormItem {
  text-align: center;
  margin-bottom: 18px;
}

#account_lock .logo > .UIImage {
  height: 88px;
}

#account_lock .username {
  color: #fff;
  font-size: 1.6rem;
}

#account_lock .password .UITextWrapper {
  background-color: var(--background-color-lock-text);
  font-size: 1.2rem;
  height: 42px;
}

#account_lock .password .UITextWrapper > .UIText {
  font-size: 1.2rem;
}

#account_lock .btnLogin {
  background-color: var(--background-color-lock-button);
  font-size: 1.2rem;
  color: #000;
  height: 42px;
}

/********************************      account_lock:END      ********************************/
/********************************      todoView:START      ********************************/
#home #todoView {
  --border-todo-item: 1px solid #e1e1e1;
  --background-color-todo-exp-finish-date: #f5f5f5;
  --font-size-todo-exp-finish-date: 0.9em;
  --font-size-todo-owner: 0.8em;
  --font-weight-todo-exp-finish-date: 600;
  --padding-todo-exp-finish-date: 1px 2px 1px 2px;
  --margin-todo-exp-finish-date: 0 0 0 3px;
  --margin-todo-owner: 0 2px 0 2px;
  --padding-todo-content: 0 0 0 3px;
}

#home #todoView .btnCreateTask:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f055";
}

#home #todoView .todo {
  border-bottom: var(--border-todo-item);
}

#home #todoView .todo.form:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e0d5";
  padding-left: 6px;
}

#home #todoView .todo .btnFinishTask:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f0c8";
}

#home #todoView .todo .taskExpFinishDate,
#home #todoView .todo .taskDate {
  background-color: var(--background-color-todo-exp-finish-date);
  font-size: var(--font-size-todo-exp-finish-date);
  font-weight: var(--font-weight-todo-exp-finish-date);
  padding: var(--padding-todo-exp-finish-date);
  margin: var(--padding-todo-exp-finish-date);
}

#home #todoView .todo .taskOwner {
  font-size: var(--font-size-todo-owner);
  margin: var(--margin-todo-owner);
}

#home #todoView .todo .taskContent {
  margin: var(--padding-todo-content);
}

#home #todoView .todo .taskContent.organization:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f500";
}

#home #todoView .todo .taskContent.company:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e4da";
}

#home #todoView .todo .taskContent.checklist:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f77f";
}

#home #todoView .todo .taskContent.appointment:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f274";
}

/********************************      todoView:END      ********************************/
/********************************      屬性定義:START      ********************************/
#screen {
  --background-color-screen-wrapper: #e0e3e6;
  --background-color-screen-header-view: #fff;
  --background-color-screen-footer-view: transparent;
  --background-color-screen-content-view: transparent;
  --background-color-screen-control-view: #fff;
  --background-color-screen-carouse-view: #000;
  --border-screen-footer-view: var(--border-color-light);
  --font-size-screen-site-name: var(--font-size-large);
  --font-size-screen-store-name: var(--font-size-base);
  --opacity-screen-control-view: 0.9;
  --padding-screen-header-view: 0 var(--padding-webkit);
  --padding-screen-site-logo: 0 var(--padding-webkit) 0 0;
  --padding-screen-footer-view: 0 var(--padding-webkit);
  --padding-screen-content-view: var(--padding-webkit);
  --margin-gutter-screen: 0px;
  --border-radius-screen: 6px;
  --height-screen-header-view: 42px;
  --height-screen-header-logo: 30px;
  --height-screen-footer-view: 36px;
  --height-screen-footer-logo: 24px;
}

/********************************      屬性定義:END      ********************************/
/********************************      screen:START      ********************************/
#screen #wrapper {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: stretch;
  -webkit-align-items: stretch;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  background-color: var(--background-color-screen-wrapper);
  width: 100%;
  height: 100%;
}

/********************************      screen:END      ********************************/
/********************************      screen/headerView:START      ********************************/
#screen #wrapper #headerView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: row;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-screen-header-view);
  height: var(--height-screen-header-view);
  padding: var(--padding-screen-header-view);
  margin: var(--margin-gutter-screen);
}

#screen #wrapper #headerView .siteInfo .logo {
  display: inline-block;
  margin: var(--padding-screen-site-logo);
}

#screen #wrapper #headerView .siteInfo .logo .UIImage {
  height: var(--height-screen-header-logo);
}

#screen #wrapper #headerView .siteInfo .siteName {
  font-size: var(--font-size-screen-site-name);
}

#screen #wrapper #headerView .siteInfo .storeName {
  font-size: var(--font-size-screen-store-name);
}

/********************************      screen/headerView:END      ********************************/
/********************************      screen/footerView:START      ********************************/
#screen #wrapper #footerView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: row;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-screen-footer-view);
  border-top: var(--border-screen-footer-view);
  height: var(--height-screen-footer-view);
  padding: var(--padding-screen-footer-view);
  margin: var(--margin-gutter-screen);
}

#screen #wrapper #footerView .systemInfo {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: row;
}

#screen #wrapper #footerView .systemInfo .logo .UIImage {
  height: var(--height-screen-footer-logo);
}

#screen #wrapper #footerView .systemInfo .name {
  padding-left: var(--padding-webkit);
}

/********************************      screen/footerView:END      ********************************/
/********************************      screen/contentView:START      ********************************/
#screen #wrapper #contentView {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  flex-grow: 1;
  background-color: var(--background-color-screen-content-view);
  padding: var(--padding-screen-content-view);
  margin: var(--margin-gutter-screen);
}

#screen #wrapper #contentView #myScreen {
  position: relative;
  height: 100%;
}

#screen #wrapper #contentView #myScreen #controlView {
  opacity: var(--opacity-screen-control-view);
  -moz-opacity: var(--opacity-screen-control-view);
  -khtml-opacity: var(--opacity-screen-control-view);
  filter: alpha(opacity=var(--opacity-screen-control-view));
  /* background-color: var(--background-color-screen-control-view);
  display: none; */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  width: 460px;
  height: 100%;
  z-index: 999;
}

/********************************      screen/contentView:END      ********************************/
/********************************      screen/carouseView:START      ********************************/
#screen #wrapper #carouseView {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-screen-carouse-view);
  height: 100%;
}

/********************************      screen/carouseView:END      ********************************/
/********************************      屬性定義:START      ********************************/
#helper_main {
  --background-color-help-center-tab-bar: #eee;
  --background-color-help-center-tab-bar_active: #fff;
  --height-help-center-caption: 36px;
  --height-help-center-tab-bar: 70px;
}

/********************************      屬性定義:END      ********************************/
/********************************      helper_main.dwp/helpCenter:START      ********************************/
#helper_main.helpCenter {
  height: 100%;
}

#helper_main.helpCenter.UIPanel > .top > .caption {
  font-size: var(--font-size-base);
  height: var(--height-help-center-caption);
  padding-left: 12px;
}

#helper_main.helpCenter.UIPanel > .top > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f05a";
}

#helper_main.helpCenter.UIPanel > .top > .UIPanelBar {
  top: 0;
  right: 12px;
}

#helper_main.helpCenter.UIPanel > .top > .UIPanelBar .close:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f00d";
  font-size: 22px;
  line-height: 36px;
  padding: 0 12px;
}

#helper_main.helpCenter.UIPanel > .content {
  padding: 0;
  height: calc(100% - var(--height-help-center-caption));
}

#helper_main.helpCenter .UIGroup.underline > .caption {
  font-size: var(--font-size-base);
  margin-bottom: var(--margin-webkit);
  height: 32px;
  padding-left: calc(var(--padding-webkit) / 2);
}

/********************************      helper_main.dwp/helpCenter:END      ********************************/
/********************************      helper_main.dwp/tabBarView:START      ********************************/
#helper_main.helpCenter #tabBarView {
  background-color: var(--background-color-help-center-tab-bar);
  border-bottom: var(--border-color-light);
  display: table;
  width: 100%;
  height: var(--height-help-center-tab-bar);
}

#helper_main.helpCenter #tabBarView ul {
  display: table-row;
}

#helper_main.helpCenter #tabBarView ul li.tab {
  display: table-cell;
  text-align: center;
  cursor: pointer;
  padding: var(--padding-webkit) 0 calc(var(--padding-webkit) / 1.5) 0;
}

#helper_main.helpCenter #tabBarView ul li.tab:hover,
#helper_main .helpCenter #tabBarView ul li.tab.active {
  background-color: var(--background-color-help-center-tab-bar_active);
  border-left: var(--border-color-light);
  border-right: var(--border-color-light);
  border-bottom: 3px solid var(--color-main);
  font-weight: 900;
}

#helper_main.helpCenter #tabBarView ul li.tab > .UILabel {
  display: block;
  font-size: 11px;
  padding-top: calc(var(--padding-webkit) / 3);
}

#helper_main.helpCenter #tabBarView .overview:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f59c";
  display: block;
  font-size: 24px;
  line-height: 28px;
}

#helper_main.helpCenter #tabBarView .quickStart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f0a4";
  display: block;
  font-size: 24px;
  line-height: 28px;
}

#helper_main.helpCenter #tabBarView .manual:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f15c";
  display: block;
  font-size: 24px;
  line-height: 28px;
}

#helper_main.helpCenter #tabBarView .knowledge:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f005";
  display: block;
  font-size: 24px;
  line-height: 28px;
}

#helper_main.helpCenter #helperCenterView {
  padding: var(--padding-webkit);
  height: calc(100% - var(--height-help-center-tab-bar) - var(--padding-webkit));
}

/********************************      helper_main.dwp/tabBarView:END      ********************************/
/********************************      helper_main.dwp/overview:START      ********************************/
#helper_main.helpCenter #overview > .UIGroup {
  margin-bottom: var(--margin-webkit);
}

#helper_main.helpCenter #overview .UIGroup.version > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-secondary);
  content: "\f46d";
}

#helper_main.helpCenter #overview .UIGroup.log {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #eee;
  position: relative;
  padding: 0 var(--padding-webkit) calc(var(--padding-webkit) / 2) var(--padding-webkit);
}

#helper_main.helpCenter #overview .UIGroup.log > .caption {
  border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  font-size: var(--font-size-smaller);
  border-bottom: var(--border-color-light);
  height: 26px;
}

#helper_main.helpCenter #overview .UIGroup.log > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: #ed7173;
  content: "\f0f3";
}

#helper_main .helpCenter #overview .UIGroup.log > .content {
  font-size: var(--font-size-small);
  padding-top: calc(var(--padding-webkit) / 2);
}

#helper_main.helpCenter #overview .UIGroup.log > .content .UILabel {
  display: block;
}

#helper_main.helpCenter #overview .UIGroup.log > .content .UILabel:before {
  content: " - ";
}

/********************************      helper_main.dwp/overview:START      ********************************/
/********************************      helper_main.dwp/quick_start:START      ********************************/
#helper_main.helpCenter #quick_start > .UIGroup {
  margin-bottom: var(--margin-layout);
}

#helper_main.helpCenter #quick_start .UIGroup.step {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #eee;
  position: relative;
  padding: 0 var(--padding-webkit);
}

#helper_main .helpCenter #quick_start .UIGroup.step .subStep {
  margin-bottom: var(--margin-webkit);
}

#helper_main.helpCenter #quick_start .UIGroup.step > .caption {
  border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-heavy);
  border-bottom: var(--border-color-light);
  height: 32px;
}

/** video:START **/
#helper_main.helpCenter #quick_start .UIGroup.video > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-secondary);
  content: "\f03d";
}

#helper_main.helpCenter #quick_start .video .UIGroup.step > .caption {
  border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  border-bottom-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  background-color: #2a3f54;
  color: #fff;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0;
  left: 0;
}

#helper_main.helpCenter #quick_start .video .UIGroup.step > .content {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  padding-left: 38px;
  height: 32px;
}

#helper_main.helpCenter #quick_start .video .UIGroup.step > .content:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-main);
  content: "\f04b";
}

/** video:END **/
/** text:END **/
#helper_main.helpCenter #quick_start .UIGroup.text > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-secondary);
  content: "\f4a6";
}

#helper_main.helpCenter #quick_start .text .UIGroup.step > .content {
  padding: calc(var(--padding-webkit) / 2);
}

#helper_main.helpCenter #quick_start .text .UIGroup.step > .content > span:first-child:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-main);
  content: "\f40f";
}

/** text:END **/
/** barcode:START **/
#helper_main.helpCenter #quick_start .UIGroup.barcode > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-secondary);
  content: "\f488";
}

#helper_main.helpCenter #quick_start .barcode .UIGroup.code > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-main);
  content: "\f465";
}

#helper_main.helpCenter #quick_start .barcode .code .UIImage {
  background-color: #fff;
  padding: calc(var(--padding-webkit) / 2) 0;
}

#helper_main.helpCenter #quick_start .barcode .UIGroup.line > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-main);
  content: "\f0c1";
}

#helper_main.helpCenter #quick_start .barcode .UIGroup.step > .content {
  padding: calc(var(--padding-webkit) / 2);
}

/** barcode:END **/
/** invoice:START **/
#helper_main.helpCenter #quick_start .UIGroup.invoice > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-secondary);
  content: "\f02f";
}

#helper_main.helpCenter #quick_start .invoice .UIGroup.code > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-main);
  content: "\f465";
}

/** invoice:END **/
/********************************      helper_main.dwp/quick_start:END      ********************************/
/********************************      helper_main.dwp/user_manual:START      ********************************/
#helper_main.helpCenter #user_manual .UIGroup.group {
  margin-bottom: var(--margin-webkit);
}

/********************************      helper_main.dwp/user_manual:END      ********************************/
/********************************      helper_main.dwp/knowledge:START      ********************************/
#helper_main.helpCenter #knowledge .UITabHost.default ul.tabs > li > a {
  padding: calc(var(--padding-webkit) / 2) var(--padding-webkit) calc(var(--padding-webkit) / 4) var(--padding-webkit);
}

#helper_main.helpCenter #knowledge .UITabHost.default > .tabContent > .UITab {
  padding: var(--padding-webkit);
}

#helper_main.helpCenter #knowledge .UIGroup.question {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #eee;
  position: relative;
  padding: 0 var(--padding-webkit);
  margin-bottom: calc(var(--margin-webkit) / 2);
}

#helper_main.helpCenter #knowledge .UIGroup.question > .caption {
  border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  font-size: var(--font-size-base);
  height: initial;
  padding: calc(var(--padding-webkit) / 1.5) 0;
}

#helper_main.helpCenter #knowledge .UIGroup.question > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-main);
  content: "\f60b";
}

#helper_main.helpCenter #knowledge .UIGroup.question > .content {
  display: none;
  border-top: var(--border-color-light);
  padding: calc(var(--padding-webkit) / 2);
}

#helper_main.helpCenter #knowledge .UIGroup.question:hover > .content {
  display: block;
}

/********************************      helper_main.dwp/user_manual:END      ********************************/
/********************************      quick_start_video:START      ********************************/
.quick_start_video {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  background-color: #000;
  height: 100%;
}

/********************************      quick_start_video:START      ********************************/
/********************************      vars.less:START      ********************************/
/* 主色調(#5bc0de/#33b5e5) */
/* 次色調(#2e95da) */
/********************************      vars.less:END      ********************************/
/********************************      WebKit/net:Box:START   ********************************/
/********************************      WebKit/net:Box:END   ********************************/
/********************************      WebKit/layout:UIPanel:START    ********************************/
/********************************      WebKit/layout:UIPanel:END    ********************************/
/********************************      WebKit/layout:UIPortlet:START    ********************************/
/********************************      WebKit/layout:UIPortlet:END    ********************************/
/********************************      WebKit/app:UIAlert:START      ********************************/
/********************************      WebKit/app:UIAlert:END      ********************************/
/********************************      style.scss:START      ********************************/
/********************************      style.scss:END      ********************************/
/********************************      屬性定義:START      ********************************/
#breadCrumbView {
  --background-color-bread-crumb: #e4ebec;
}

.UIGroup.tag {
  --background-color-tag: rgba(46,149,128,0.1);
}

/********************************      屬性定義:END      ********************************/
/********************************      樣式定義: START      ********************************/
/** queryForm/queryResult:START **/
.queryForm .UITabHost.default > ul.tabs > li > a {
  font-size: 1em;
}

.queryResult {
  margin-top: 24px;
  margin-left: -12px;
  margin-right: -12px;
}

.queryResult .UIDataTable .UIDataColumn > .UIImage:hover,
.queryResult .UIPaginatedDataTable .UIDataColumn > .UIImage:hover {
  border: 1px solid rgba(0, 0, 0, 0.2);
  transform: scale(2.5) translateX(12px);
  z-index: 9999;
}

/** queryForm/queryResult:END **/
/** tagButton:START **/
.tagButton {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  background-color: var(--background-color-button);
  color: var(--font-color-button);
  padding: 6px 12px;
  margin: 3px;
}

.tagButton[name=untag] {
  background-color: #eee;
}

.tagButton[name=tag] .UILink {
  color: #fff;
}

.tagButton .UILink > i {
  font-size: 16px;
  padding: 0 3px;
}

.tagButton .name .UILink:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f02b";
}

.UIGroup.tag {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  color: #007db8;
  background-color: var(--background-color-tag);
  display: inline-block;
  padding: 0 6px;
  margin-right: 6px;
}

.UIGroup.tag.smart {
  color: #33b5e5;
}

.UIGroup.tag:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "#";
  padding-right: 3px;
}

/** tagButton:END **/
/* DataTable裡最後一個元素如果有align=right, 則設定不折行 */
@media (max-width: 768px) {
  .UIDataTable .UIDataColumn:last-child,
  .UIPaginatedDataTable .UIDataColumn:last-child {
    white-space: nowrap;
  }
}

/********************************      樣式定義: END      ********************************/
/********************************      privacyPolicy: START      ********************************/
.privacyPolicy {
  margin: 48px auto 0 auto;
  width: 800px;
}

.privacyPolicy > .caption {
  font-size: 1.6rem;
  padding: 24px 0;
}

.privacyPolicy .session {
  margin-bottom: 24px;
}

.privacyPolicy .session > .caption {
  font-size: 1.4rem;
}

/********************************      privacyPolicy: END      ********************************/
/********************************      Print: START      ********************************/
/** print_header:START */
.UIPage.print .document #print_header .barcode {
  position: absolute;
  top: 12px;
  right: 24px;
}

.UIPage.print .document #print_header .name {
  font-size: 2em;
  text-align: center;
}

/** print_header:END */
/** form:START */
.UIPage.print .document .form > .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-bottom: 1px solid #000;
  font-size: 1.2rem;
}

.UIPage.print .document .form .header {
  padding: 12px 0;
  margin-bottom: 12px;
}

.UIPage.print .document .form .body {
  border-bottom: 1px solid #000;
}

.UIPage.print .document .form .footer {
  padding: 12px 0;
}

/** form:END */
/** invoiceStamp:START */
.UIPage.print .document #print_footer .invoiceStamp {
  position: relative;
}

.UIPage.print .document #print_footer .invoiceStamp > .UIImage {
  width: 200px;
  position: absolute;
  right: 0;
  top: 24px;
}

/** invoiceStamp:END */
/********************************      Print: END      ********************************/
/********************************      announcement_portlet:START      ********************************/
#announcement_portlet #latestAnnouncementView > .content > .title {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

#announcement_portlet #latestAnnouncementView > .content > #info {
  font-size: 0.8rem;
}

#announcement_portlet #latestAnnouncementView > .content > #info > .postDate {
  padding-right: 12px;
}

#announcement_portlet #latestAnnouncementView > .content > #info > .organizer {
  padding-right: 12px;
}

/********************************      announcement_portlet:END      ********************************/
/********************************      #announcement_portlet_view:START      ********************************/
#announcement_portlet_view #info #postDate,
#announcement_portlet_view #info #organizer {
  display: inline-block;
  padding-right: 24px;
  margin-bottom: 12px;
}

#announcement_portlet_view #info #postDate .UILabel:first-child:after,
#announcement_portlet_view #info #organizer .UILabel:first-child:after {
  content: " : ";
}

#announcement_portlet_view #content {
  font-size: 14px;
  padding: 0px;
}

/********************************      announcement_portlet_view:END      ********************************/
/********************************      breadCrumbView (路徑顯示/產品編輯時使用):START      ********************************/
#breadCrumbView {
  background-color: var(--background-color-bread-crumb);
  margin-bottom: 12px;
  padding: 4px 12px;
}

/********************************      breadCrumbView:END      ********************************/
/********************************      product_category_main:START      ********************************/
#product_category_main .folder[name="2"] {
  padding-left: 24px;
}

#product_category_main .folder[name="3"] {
  padding-left: 48px;
}

#product_category_main .folder[name="4"] {
  padding-left: 72px;
}

#product_category_main .folder[name="5"] {
  padding-left: 96px;
}

/********************************      product_category_main:END      ********************************/
/********************************      product_target_list:START      ********************************/
#product_target_list .UIDataTable .UIDataColumn .UILabel {
  padding-left: 6px;
}

#product_target_list .folder[name="3"] {
  padding-left: 24px;
}

/********************************      product_target_list:END      ********************************/
/********************************      product_edit:START      ********************************/
#product_edit #breadCrumbView,
#product_bundle_edit #breadCrumbView {
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  margin-top: -12px;
  margin-bottom: 6px;
  padding: 4px 12px;
}

#product_edit #breadCrumbView .breadCrumb,
#product_bundle_edit #breadCrumbView .breadCrumb {
  display: inline-block;
}

#product_edit #breadCrumbView .productTag,
#product_bundle_edit #breadCrumbView .productTag {
  display: inline-block;
  float: right;
}

#product_edit #breadCrumbView .productTag .UILink,
#product_bundle_edit #breadCrumbView .productTag .UILink {
  padding-right: 6px;
}

/********************************      product_edit:END      ********************************/
/********************************      任選組合產品樣式: START      ********************************/
#fixedBundleProductView .UIForm,
#optionBundleProductView .UIForm {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 3px;
}

#fixedBundleProductView .UIForm:last-child,
#optionBundleProductView .UIForm:last-child {
  border-bottom: none;
}

#optionBundleProductView .UIForm.A .UIFormItem.name td:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: #45a9f6;
  content: "\f525";
  padding-right: 6px;
}

#optionBundleProductView .UIForm.B .UIFormItem.name td:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: #0bcf89;
  content: "\f528";
  padding-right: 6px;
}

#optionBundleProductView .UIForm.G .UIFormItem.name td:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: #fb0104;
  content: "\f06b";
  padding-right: 6px;
}

/********************************      任選組合產品樣式: END      ********************************/
/********************************      productNumberScanView: START      ********************************/
#productNumberScanView .scanSN > div:last-child {
  position: relative;
}

#productNumberScanView .scanSN .UITextWrapper > .UIText.control {
  padding-left: 36px;
}

#productNumberScanView .scanSN .switch {
  width: 36px !important;
  text-align: center;
  position: absolute;
  top: 0;
  left: 3px;
  z-index: 99;
}

#productNumberScanView .scanSN .switch:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f0ec";
  color: #33b5e5;
  font-size: 22px;
  line-height: 36px;
}

#productNumberScanView .scanSN .generate {
  width: 36px !important;
  text-align: center;
  position: absolute;
  top: 0;
  right: 3px;
  z-index: 99;
}

#productNumberScanView .scanSN .generate:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f074";
  color: #33b5e5;
  font-size: 22px;
  line-height: 36px;
}

/********************************      productNumberScanView: END      ********************************/
/********************************      Invoice: START      ********************************/
@media (max-width: 768px) {
  #invoice #orderInvoice, #invoice #orderTrade {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #receipt #orderReceipt {
    width: 100%;
  }
}

/********************************      Invoice: END      ********************************/
/********************************      inventory_count_edit_scan: END      ********************************/
#inventory_count_edit_scan #codeScanner {
  display: none;
}

#inventory_count_edit_scan .barcode {
  position: relative;
}

#inventory_count_edit_scan .barcode #scanner {
  width: initial !important;
  position: absolute;
  right: 16px;
  bottom: 8px;
}

#inventory_count_edit_scan .barcode #scanner:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f464";
  color: #007db8;
  font-size: 24px;
}

/********************************      inventory_count_edit_scan: END      ********************************/
/********************************      屬性定義:START      ********************************/
#login {
  --background-image-login: url("../images/bg_login.jpg");
  --background-color-login-pattern: rgba(53, 55, 62, 0.20);
  --border-radius-login-panel: 6px;
}

/********************************      屬性定義:END      ********************************/
/********************************      login.dwp:START      ********************************/
#login #loginView.UIPanel {
  border-radius: var(--border-radius-login-panel);
  -moz-border-radius: var(--border-radius-login-panel);
  -webkit-border-radius: var(--border-radius-login-panel);
  z-index: 9999;
}

#login #loginView .UITextWrapper .UIText,
#login #loginView .UITextWrapper.form-floating > label {
  padding-left: 38px;
}

#login #loginView #loginIdW.UITextWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f007";
  color: var(--font-color-login-icon);
  font-size: var(--font-size-login-icon-input);
  line-height: 42px;
  padding-left: 16px;
  position: absolute;
  left: 0;
}

#login #loginView #passwordW.UITextWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f084";
  color: var(--font-color-login-icon);
  font-size: var(--font-size-login-icon-input);
  line-height: 42px;
  padding-left: 16px;
  position: absolute;
  left: 0;
}

/********************************      login.dwp:END      ********************************/
/********************************      login.dwp/pattern:START      ********************************/
#login .pattern {
  background-color: var(--background-color-login-pattern);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/********************************      login.dwp/pattern:END      ********************************/
/********************************      屬性定義:START      ********************************/
#index {
  --background-color-index: #e0e3e6;
  --background-color-index-sidebar: #252525;
  --background-color-index-sidebar-nav-title: rgba(0, 0, 0, 0.8);
  /* 過年顏色
  --background-color-index-sidebar: #481410;
  --background-color-index-sidebar-nav-title: rgba(0, 0, 0, 0.2); */
  --background-color-index-header: #f8f9fa;
  --background-color-index-sidebar-widget: rgba(0, 0, 0, 0.7);
  --font-color-index-sidebar-info: #fff;
  --font-color-index-sidebar-widget: #fff;
  --font-color-index-sidebar-nav-title: #fff;
  --font-color-index-sidebar-nav-item: var(--font-color-white);
}

/********************************      屬性定義:END      ********************************/
/********************************      index.dwp/sidebarView/timesheet:START      ********************************/
#index #sidebarView .siteWidget .widget.timesheet .clock {
  text-align: center;
}

#index #sidebarView .siteWidget .widget.timesheet .clock .date {
  color: var(--font-color-index-sidebar-widget-title);
  font-size: var(--font-size-index-sidebar-widget-title);
}

#index #sidebarView .siteWidget .widget.timesheet .clock .time {
  color: var(--font-color-index-sidebar-widget-data);
  font-size: var(--font-size-index-sidebar-widget-data);
  font-weight: 800;
}

#index #sidebarView .siteWidget .widget.timesheet .clock .time span {
  display: inline-block;
  padding-right: calc(var(--padding-webkit) / 2);
}

#index #sidebarView .siteWidget .widget.timesheet .clock .time i {
  padding-right: 0;
}

#index #sidebarView .siteWidget .widget.timesheet .clock .UIButton {
  height: var(--height-index-sidebar-widget-button);
  margin-top: calc(var(--margin-webkit) / 2);
}

#index #sidebarView .siteWidget .widget.timesheet .clock .UIButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2f2";
}

#index #sidebarView .siteWidget .widget.timesheet .result {
  border-right: var(--border-color-translucent);
  color: var(--font-color-index-sidebar-widget-title);
  font-size: var(--font-size-index-sidebar-widget-title);
}

#index #sidebarView .siteWidget .widget.timesheet .result > .UIGroup {
  height: 36px;
}

#index #sidebarView .siteWidget .widget.timesheet .result > .UIGroup .value {
  color: var(--font-color-index-sidebar-widget-data);
  font-size: var(--font-size-index-sidebar-widget-data);
  font-weight: 800;
  text-align: center;
}

/********************************      index.dwp/sidebarView/timesheet:END      ********************************/
/********************************      index.dwp/sidebarView/principal:END      ********************************/
#index #sidebarView .siteWidget .widget.principal .content {
  padding: 0;
}

#index #sidebarView .siteWidget .widget.principal .content:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f6e7";
  color: var(--font-color-white);
  padding-left: var(--padding-webkit);
}

#index #sidebarView .siteWidget .widget.principal .UIMenuWrapper:before {
  color: var(--font-color-white);
}

#index #sidebarView .siteWidget .widget.principal .UIMenuWrapper .UIMenu {
  color: var(--font-color-white);
}

/********************************      index.dwp/sidebarView/principal:END      ********************************/
/********************************      index.dwp/sidebarView/store:END      ********************************/
#index #sidebarView .siteWidget .widget.store .content {
  padding: 0;
}

#index #sidebarView .siteWidget .widget.store .content:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f54f";
  color: var(--font-color-white);
  padding-left: var(--padding-webkit);
}

#index #sidebarView .siteWidget .widget.store .UIMenuWrapper:before {
  color: var(--font-color-white);
}

#index #sidebarView .siteWidget .widget.store .UIMenuWrapper .UIMenu {
  color: var(--font-color-white);
}

/********************************      index.dwp/sidebarView/store:END      ********************************/
/********************************      index.dwp/sidebarView/siteNav:START      ********************************/
/* 第一層且有子選單:START */
#index #sidebarView .siteNav .UIVerticalNavigation > .menu ul a > i {
  font-size: 1.1rem;
}

#index #sidebarView .siteNav .UIVerticalNavigation > .menu .submenu.level1 > a:after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: #8d97ad;
  right: 20px;
  transform: rotate(135deg) translate(0, -50%);
  transform-origin: top;
  top: 21px;
  transition: all 0.3s ease-out;
}

#index #sidebarView .siteNav .UIVerticalNavigation > .menu .submenu.level1.active > a:after {
  -webkit-transform: rotate(-135deg) translate(0, -50%);
  -ms-transform: rotate(-135deg) translate(0, -50%);
  -o-transform: rotate(-135deg) translate(0, -50%);
  top: 42%;
  width: 7px;
  transform: rotate(-135deg) translate(0, -50%);
}

/* 第一層且有子選單:END */
/* 第一層hover:START */
#index #sidebarView .siteNav .UIVerticalNavigation > .menu ul > li.level1 > a:hover {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: var(--color-main);
}

/* 第一層hover:END */
/* 第二層以後顏色 */
#index #sidebarView .siteNav .UIVerticalNavigation > .menu > ul ul {
  background-color: rgba(0, 0, 0, 0.3);
}

#index #sidebarView .siteNav .UIVerticalNavigation > .menu ul ul li a:hover,
#sidebarView .siteNav .UIVerticalNavigation > .menu ul ul li.active > a {
  background-color: rgba(0, 0, 0, 0.8);
  border-left: 3px solid #007db8;
  color: var(--color-main);
}

/********************************      index.dwp/sidebarView/siteNav:END      ********************************/
#rentalInfoView {
  --background-color-rental: #ececec;
  --background-color-rental-button: #7989a5;
}

/********************************      today_summary_portlet:START      ********************************/
#today_summary_portlet.UIPortlet {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

#today_summary_portlet.UIPortlet > .content {
  padding: 0;
}

#today_summary_portlet .todaySummary01 {
  background-color: #08c;
  color: #fff;
}

#today_summary_portlet .todaySummary02 {
  background-color: #67c1ee;
  color: #fff;
}

#today_summary_portlet .todaySummary03 {
  background-color: #ec7173;
  color: #fff;
}
@media (max-width: 992px) {
  #today_summary_portlet .todaySummary03 {
    display: none;
  }
}

#today_summary_portlet .todaySummary04 {
  background-color: #2b333e;
  color: #fff;
}
@media (max-width: 992px) {
  #today_summary_portlet .todaySummary04 {
    display: none;
  }
}

#today_summary_portlet .UIPanel {
  margin-bottom: 0;
}

#today_summary_portlet .UIPanel .content {
  padding: 12px 18px;
}
@media (max-width: 1200px) {
  #today_summary_portlet .UIPanel .content {
    padding: 6px 12px;
  }
}

#today_summary_portlet .UIPanel .UIPanelBottom {
  border-top-color: rgba(255, 255, 255, 0.4);
  font-size: 0.8em;
  padding: 6px 0;
}

#today_summary_portlet .UIPanel .UIPanelBottom .diff {
  font-size: 0.8rem;
  padding-left: 4px;
}

#today_summary_portlet .UIPanel .UIPanelBottom .diff.up:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f30c";
  padding-right: 3px;
}

#today_summary_portlet .UIPanel .UIPanelBottom .diff.down:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f309";
  padding-right: 3px;
}

#today_summary_portlet .UIPanel .contentValue {
  text-align: left;
  font-size: 1.6em;
}

#today_summary_portlet .UIPanel .contentValue .slash {
  font-size: 12px;
  padding-right: 8px;
}

#today_summary_portlet .UIPanel .contentIcon > i {
  color: #fff;
  font-size: 22px;
  line-height: 32px;
}

#today_summary_portlet .remark {
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
  padding-top: 12px;
}

#today_summary_portlet .remark i {
  padding-right: 8px;
}

@media (min-width: 768px) {
  #today_summary_portlet .UIPanel .contentValue {
    text-align: left;
    font-size: 1.2em;
  }
  #today_summary_portlet .UIPanel .contentIcon > i {
    font-size: 22px;
    line-height: 26px;
  }
}
/********************************      today_summary_portlet:END      ********************************/
/********************************      daily_sales_summary_portlet:START      ********************************/
#daily_sales_summary_portlet .remark {
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
}

/********************************      daily_sales_summary_portlet:END      ********************************/
/********************************      current_month_summary_portlet:START      ********************************/
#current_month_summary_portlet .monthSummary {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #08c;
  color: #fff;
  font-size: 0.9rem;
  padding: 6px 12px;
  margin-bottom: 6px;
  position: relative;
}

#current_month_summary_portlet .monthSummary .diff {
  font-size: 0.8rem;
  padding-left: 4px;
}

#current_month_summary_portlet .monthSummary .diff.up:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f30c";
  padding-right: 3px;
}

#current_month_summary_portlet .monthSummary .diff.down:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f309";
  padding-right: 3px;
}

#current_month_summary_portlet .monthSummary .value {
  position: absolute;
  right: 12px;
}

#current_month_summary_portlet .monthSummary.amount .diff {
  display: block;
}

#current_month_summary_portlet .monthSummary.amount .value {
  top: 8px;
}

#current_month_summary_portlet .monthSummary.amount:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f155";
  font-size: 16px;
}

#current_month_summary_portlet .monthSummary.quantity:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f64e";
  font-size: 16px;
}

#current_month_summary_portlet .monthSummary.person:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0c0";
  font-size: 16px;
}

/********************************      current_month_summary_portlet:START      ********************************/
/********************************      social_link_portlet:START      ********************************/
#social_link_portlet .social {
  background-color: #f5f5f5;
  padding-bottom: 6px;
}

#social_link_portlet .social .title {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: #eee;
  padding: 6px 12px;
  margin-bottom: 12px;
}

#social_link_portlet .social .facebookApp {
  padding-left: 12px;
  padding-bottom: 3px;
}

#social_link_portlet .social .facebookApp:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f082";
  color: #305891;
  font-size: 16px;
}

#social_link_portlet .social .facebookApp .delete {
  float: right;
  margin-right: 6px;
}

/********************************      social_link_portlet:END      ********************************/
/********************************      low_inventory_portlet:START      ********************************/
#low_inventory_portlet .remark {
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
}

/********************************      low_inventory_portlet:END      ********************************/
/********************************      dashboard_main:START      ********************************/
#dashboard_main .rightArea .UIPanel > .top > .caption {
  padding-left: 18px;
  height: 32px;
}

#dashboard_main .rightArea .UIPanel > .content {
  padding: 24px;
}

/********************************      dashboard_main:END      ********************************/
/********************************      rentalInfoView:START      ********************************/
#rentalInfoView {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: var(--background-color-rental);
  padding: calc(var(--padding-webkit) / 2) var(--padding-webkit);
  text-align: right;
}

#rentalInfoView .info:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f848";
}

#rentalInfoView .UIButton {
  background-color: var(--background-color-rental-button);
  height: 24px;
  line-height: 24px;
}

/********************************      rentalInfoView:END      ********************************/
/********************************      customerView:START      ********************************/
#customer_create #customerCategoryEdit:before,
#customer_create #customerSubCategoryEdit:before,
#customer_edit_company #customerCategoryEdit:before,
#customer_edit_company #customerSubCategoryEdit:before,
#customer_edit_personal #customerCategoryEdit:before,
#customer_edit_personal #customerSubCategoryEdit:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\e26e";
  font-size: 36px;
  line-height: 36px;
}

/********************************      customerView:END      ********************************/
/********************************      pos/mainLayout:START      ********************************/
#pos {
  --background-color-pos-panel: #fff;
  --gutter-pos-panel: 8px;
  --height-checkout-customer: 52px;
  --height-pos-control-view: 58px;
  --padding-checkout-cart: 12px;
}

#pos {
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  margin: -12px;
}

#pos #layout {
  width: 100%;
  height: 100%;
}

#pos #posContentView {
  height: calc(100% - var(--height-pos-control-view) - var(--gutter-pos-panel));
  margin-bottom: var(--gutter-pos-panel);
}

#pos #posContentView #posCheckoutView #checkout #customerView {
  background-color: var(--background-color-pos-panel);
  height: var(--height-checkout-customer);
  margin-bottom: var(--gutter-pos-panel);
}

#pos #posContentView #posCheckoutView #checkout #cartView {
  background-color: var(--background-color-pos-panel);
  height: calc(100% - var(--height-checkout-customer) - var(--gutter-pos-panel));
  padding: var(--padding-checkout-cart);
}

#pos #posContentView #posCheckoutView #checkout #cartView #tabHostCheckout.UITabHost #tabCheckout.UITab {
  position: relative;
}

#pos #posContentView #posTouchView #tabHostTouch.UITabHost > .tabContent > .UITab {
  background-color: var(--background-color-pos-panel);
}

#pos #posControlView {
  height: var(--height-pos-control-view);
}

#pos #posControlView.UIPanel > .content {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

#pos #popUpView {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: -200px;
  z-index: 9999;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}

#pos #eposCashBoxView {
  width: 10px;
  height: 10px;
  display: none;
}

@media (max-width: 768px) {
  #pos #posContentView > .UIFixedLayout > div {
    width: 100% !important;
  }
  #pos #posContentView > .UIFixedLayout > div:first-child {
    display: none;
  }
  #pos #posControlView #postFunctionView {
    display: none;
  }
}
/********************************      pos/mainLayout:START      ********************************/
/********************************      pos/posControlView:START      ********************************/
#pos #posControlView {
  --background-color-control-function-button: #000;
  --font-size-control-warehouse-icon: 22px;
  --min-width-control-function-button: 120px;
  --margin-control-warehouse-icon: 0 0 0 12px;
}

/* postFunctionView:START */
#pos #posControlView #postFunctionView .UIButton {
  background-color: var(--background-color-control-function-button);
  min-width: var(--min-width-control-function-button);
}

#pos #posControlView #postFunctionView .UIButton.toolBarScreen::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f24d";
}

/* postFunctionView:END */
/* posWarehouseView:START */
#pos #posControlView #posWarehouseView,
#pos #posControlView #posWarehouseView > .UIGroup {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

#pos #posControlView #posWarehouseView .salesChannel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0ac";
  font-size: var(--font-size-control-warehouse-icon);
  margin: var(--margin-control-warehouse-icon);
}

#pos #posControlView #posWarehouseView .warehouse:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f495";
  font-size: var(--font-size-control-warehouse-icon);
  margin: var(--margin-control-warehouse-icon);
}

/* posWarehouseView:END */
/********************************      pos/posControlView:END      ********************************/
/********************************      tab_product_list.inc:START      ********************************/
#pos #tab_product_list {
  --background-color-product-list-menu: #000;
  --background-color-product-list-page-control-button: transparent;
  --border-product-list-item: 1px solid rgba(0, 0, 0, 0.06);
  --font-color-product-list-menu-item: #d8ecfc;
  --font-color-product-list-page-control-button: var(--color-main);
  --font-size-product-list-item-info: 13px;
  --height-product-list-menu-item: 36px;
  --height-product-list-item-info_double: 42px;
  --height-product-list-search: 46px;
  --opacity-product-list-item-info: 0.8;
  --padding-product-list-menu-item: 0 12px;
  --padding-product-list-page-control: 6px 0;
  --padding-product-list-page-control-button: 0 48px;
  --padding-product-list-item: 1px;
  --padding-product-list-item-info: 2px 3px;
  --margin-product-list-menu: 0 2px;
  --margin-product-list-item: 3px;
}

#pos #tab_product_list #quickMenuView {
  background-color: var(--background-color-product-list-menu);
  margin: var(--margin-product-list-menu);
  overflow-x: auto;
}

#pos #tab_product_list #quickMenuView ul {
  white-space: nowrap;
}

#pos #tab_product_list #quickMenuView ul > li {
  display: inline-block;
}

#pos #tab_product_list #quickMenuView ul > li:before {
  content: "|";
  color: var(--font-color-product-list-menu-item);
}

#pos #tab_product_list #quickMenuView ul:first-of-type > li:first-child:before {
  content: "";
}

#pos #tab_product_list #quickMenuView ul > li #backMenuCategory:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f137";
}

#pos #tab_product_list #quickMenuView ul > li a {
  color: var(--font-color-product-list-menu-item);
  display: inline-block;
  height: var(--height-product-list-menu-item);
  line-height: var(--height-product-list-menu-item);
  padding: var(--padding-product-list-menu-item);
}

#pos #tab_product_list #productSearchView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  height: var(--height-product-list-search);
}

#pos #tab_product_list #productSearchView .UIForm > .UIFormItem > div.data {
  margin-bottom: 0px;
}

#pos #tab_product_list #productListView {
  height: calc(100% - var(--height-product-list-menu-item) - var(--height-product-list-search));
}

#pos #tab_product_list #productListView .UIPaginatedGridLayout2 > .row {
  margin-left: 0;
  margin-right: 0;
}

#pos #tab_product_list #productListView .UIPaginatedGridLayout2 > .row > * {
  padding-left: 0;
  padding-right: 0;
}

#pos #tab_product_list #productListView .UIPaginatedGridLayout2 #pageControl {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  padding: var(--padding-product-list-page-control);
}

#pos #tab_product_list #productListView .UIPaginatedGridLayout2 #pageControl .UIButton {
  background-color: var(--background-color-product-list-page-control-button);
  color: var(--font-color-product-list-page-control-button);
  padding: var(--padding-product-list-page-control-button);
}

#pos #tab_product_list #productListView #productItemView {
  position: relative;
  border: var(--border-product-list-item);
  padding: var(--padding-product-list-item);
  margin: var(--margin-product-list-item);
}

#pos #tab_product_list #productListView #productItemView .productInfo {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-end;
  -webkit-align-items: flex-end;
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: var(--font-size-product-list-item-info);
  height: var(--height-product-list-item-info_double);
  opacity: var(--opacity-product-list-item-info);
  padding: var(--padding-product-list-item-info);
}

/********************************      tab_product_list.inc:END      ********************************/
/********************************      tab_product_search.inc:START      ********************************/
#pos #tab_product_search {
  --height-product-search-view: 58px;
  --padding-product-search-result-category-form: 0 12px 6px 12px;
  --padding-product-search-result-category-tree: 0 12px 0 12px;
}

#pos #tab_product_search #productSearchView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex;
  -webkit-justify-content: flex;
  height: var(--height-product-search-view);
}

#pos #tab_product_search #productResultView {
  height: calc(100% - var(--height-product-search-view));
  overflow-y: auto;
}

#pos #tab_product_search #productResultView #productCategoryView .UIForm {
  padding: var(--padding-product-search-result-category-form);
}

#pos #tab_product_search #productResultView #productCategoryView .UITree {
  padding: var(--padding-product-search-result-category-tree);
}

#pos #tab_product_search #productResultView #productListView {
  height: 100%;
  overflow-y: auto;
}

/********************************      tab_product_search.inc:END      ********************************/
/********************************      tab_product_item.inc/tab_product_item_bundle_fixed.inc/tab_product_item_bundle_option.inc:START      ********************************/
#tab_product_item,
#tab_product_item_bundle_fixed,
#tab_product_item_bundle_option {
  --background-color-promotion-item: #eee;
  --background-color-promotion-item-type: #000;
  --font-size-promotion-item: 0.9rem;
  --font-color-promotion-item-type: #fff;
  --icon-color-product-favorites: #ff0d49;
  --icon-size-product-favorites: 24px;
  --padding-product: var(--padding-panel-content);
  --padding-product-code: var(--padding-webkit);
  --padding-product-buy: 0 120px;
  --padding-product-tab: 3px 3px 0 3px;
  --padding-promotion-item: 3px 0;
  --padding-promotion-item-type: 0 12px;
  --padding-promotion-item-name: 0 12px;
}

#tab_product_item.UIPanel > .content,
#tab_product_item_bundle_fixed.UIPanel > .content,
#tab_product_item_bundle_option.UIPanel > .content {
  padding: 0;
}

#tab_product_item #productView,
#tab_product_item_bundle_fixed #productView,
#tab_product_item_bundle_option #productView {
  height: 100%;
  padding: var(--padding-product);
}

#tab_product_item #productView .btnBuy,
#tab_product_item_bundle_fixed #productView .btnBuy,
#tab_product_item_bundle_option #productView .btnBuy {
  padding: var(--padding-product-buy);
}

/* productImage:START */
#tab_product_item #productView .productImage,
#tab_product_item_bundle_fixed #productView .productImage,
#tab_product_item_bundle_option #productView .productImage {
  position: relative;
}

#tab_product_item #productView .productImage .UILink.favorites,
#tab_product_item_bundle_fixed #productView .UILink.favorites,
#tab_product_item_bundle_option #productView .UILink.favorites {
  position: absolute;
  bottom: 46px;
  right: 12px;
}

#tab_product_item #productView .productImage .UILink.favorites:before,
#tab_product_item_bundle_fixed #productView .UILink.favorites:before,
#tab_product_item_bundle_option #productView .UILink.favorites:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--icon-color-product-favorites);
  font-size: var(--icon-size-product-favorites);
  content: "\f004";
}

#tab_product_item #productView .productImage .code,
#tab_product_item_bundle_fixed #productView .code,
#tab_product_item_bundle_option #productView .code {
  padding: var(--padding-product-code);
}

#tab_product_item #productView .productImage .code:before,
#tab_product_item_bundle_fixed #productView .code:before,
#tab_product_item_bundle_option #productView .code:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f02a";
}

/* productImage:END */
/* productInfo:START */
#tab_product_item #productView .productInfo .UIForm,
#tab_product_item_bundle_fixed #productView .productInfo .UIForm,
#tab_product_item_bundle_option #productView .productInfo .UIForm {
  position: relative;
}

#tab_product_item #productView .productInfo .amount,
#tab_product_item_bundle_fixed #productView .productInfo .amount,
#tab_product_item_bundle_option #productView .productInfo .amount {
  position: absolute;
  right: 12px;
  bottom: 0px;
}

/* productInfo:END */
/* UITabHost:START */
#tab_product_item #productView .UITabHost .UITab,
#tab_product_item_bundle_fixed #productView .UITabHost .UITab,
#tab_product_item_bundle_option #productView .UITabHost .UITab {
  padding: var(--padding-product-tab);
}

/* UITabHost:END */
/* promotionList:START */
#tab_product_item #productView .promotionList .UIGroup {
  background-color: var(--background-color-promotion-item);
  font-size: var(--font-size-promotion-item);
  margin: var(--padding-promotion-item);
}

#tab_product_item #productView .promotionList .UIGroup .type {
  background-color: var(--background-color-promotion-item-type);
  color: var(--font-color-promotion-item-type);
  padding: var(--padding-promotion-item-type);
}

#tab_product_item #productView .promotionList .UIGroup .name {
  padding: var(--padding-promotion-item-name);
}

#tab_product_item #productView .promotionList .UIGroup .price {
  float: right;
  padding: var(--padding-promotion-item-name);
}

/* promotionList:END */
/* tab_product_item_bundle_option:START */
#tab_product_item_bundle_option #productView .UITabHost .UIDataTable > table > thead {
  display: none;
}

/* tab_product_item_bundle_option:END */
/********************************      tab_product_item.inc/tab_product_item_bundle_fixed.inc/tab_product_item_bundle_option.inc:END      ********************************/
/********************************      tab_product_favorites.inc:START      ********************************/
#pos #tab_product_favorites {
  --border-product-favorites-item: 1px solid rgba(0, 0, 0, 0.06);
  --color-product-favorites-item: #ff0d49;
  --font-size-product-favorites-item-info: 13px;
  --font-size-product-favorites-item: 24px;
  --height-product-favorites-item-info_double: 42px;
  --opacity-product-favorites-item-info: 0.8;
  --padding-product-favorites-item: 1px;
  --padding-product-favorites-item-info: 2px 3px;
  --margin-product-favorites-item: 3px;
}

#pos #tab_product_favorites #productListView {
  position: relative;
  overflow-y: auto;
}

#pos #tab_product_favorites #productListView .UIGridLayout > .row {
  margin-left: 0;
  margin-right: 0;
}

#pos #tab_product_favorites #productListView .UIGridLayout > .row > * {
  padding-left: 0;
  padding-right: 0;
}

#pos #tab_product_favorites #productListView #productItemView {
  position: relative;
  border: var(--border-product-favorites-item);
  padding: var(--padding-product-favorites-item);
  margin: var(--margin-product-favorites-item);
}

#pos #tab_product_favorites #productListView #productItemView .productInfo {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-end;
  -webkit-align-items: flex-end;
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: var(--font-size-product-favorites-item-info);
  height: var(--height-product-favorites-item-info_double);
  opacity: var(--opacity-product-favorites-item-info);
  padding: var(--padding-product-favorites-item-info);
}

#pos #tab_product_favorites #productListView #productItemView .favorites {
  position: absolute;
  top: 0;
  right: 6px;
}

#pos #tab_product_favorites #productListView #productItemView .favorites.remove:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--color-product-favorites-item);
  font-size: var(--font-size-product-favorites-item);
  content: "\e4ff";
}

/********************************      tab_product_favorites.inc:END      ********************************/
/********************************      checkout/customerView:START      ********************************/
#pos #checkout #customerView {
  --color-checkout-customer-order: var(--color-main);
  --color-checkout-customer-info-birthday: var(--color-red);
  --font-color-checkout-customer: var(--color-main);
  --font-color-checkout-customer-icon_disabled: #eee;
  --font-size-checkout-customer-icon: 24px;
  --font-size-checkout-customer-info-code: var(--font-size-smaller);
  --font-size-checkout-customer-info-name: 1.1rem;
  --font-size-checkout-customer-info-grade: var(--font-size-smaller);
  --width-checkout-customer-control: 46px;
  --padding-checkout-customer: 0 12px;
  --padding-checkout-customer-icon-divider: 0 12px;
  --margin-checkout-customer-info-salesman: 6px;
}

#pos #checkout #customerView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding: var(--padding-checkout-customer);
}

#pos #checkout #customerView .addCustomer:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--font-color-checkout-customer);
  font-size: var(--font-size-checkout-customer-icon);
  content: "\f234";
}

#pos #checkout #customerView .addCustomer:after {
  color: var(--font-color-checkout-customer);
  font-size: var(--font-size-checkout-customer-icon);
  padding: var(--padding-checkout-customer-icon-divider);
  content: "|";
}

#pos #checkout #customerView .findCustomer:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--font-color-checkout-customer);
  font-size: var(--font-size-checkout-customer-icon);
  content: "\f002";
}

#pos #checkout #customerView #searchCustomerW {
  border: 0;
}

#pos #checkout #customerView #searchCustomerW > .UIText:focus {
  border: none;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

#pos #checkout #customerView .btnGuestCustomer {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#pos #checkout #customerView .btnGuestCustomer:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f183";
}

#pos #checkout #customerView .customerAvatar:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--font-color-checkout-customer);
  font-size: var(--font-size-checkout-customer-icon);
  content: "\f2bd";
}

#pos #checkout #customerView .customerAvatar:after {
  color: var(--font-color-checkout-customer);
  font-size: var(--font-size-checkout-customer-icon);
  padding: var(--padding-checkout-customer-icon-divider);
  content: "|";
}

#pos #checkout #customerView .customerAvatar[disabled=true]:before {
  color: var(--font-color-checkout-customer-icon_disabled);
}

#pos #checkout #customerView .customerInfo {
  width: 100%;
}

#pos #checkout #customerView .customerInfo .customerCode {
  font-size: var(--font-size-checkout-customer-info-code);
}

#pos #checkout #customerView .customerInfo .customerCode .salesman {
  margin-left: var(--margin-checkout-customer-info-salesman);
}

#pos #checkout #customerView .customerInfo .customerCode .salesman:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f47f";
}

#pos #checkout #customerView .customerInfo .customerName {
  font-size: var(--font-size-checkout-customer-info-name);
}

#pos #checkout #customerView .customerInfo .customerName .customerGradeName {
  font-size: var(--font-size-checkout-customer-info-grade);
}

#pos #checkout #customerView .customerInfo .customerName .birthday:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f1fd";
  color: var(--color-checkout-customer-info-birthday);
}

#pos #checkout #customerView .customerControl {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

#pos #checkout #customerView .customerControl .customerReserve,
#pos #checkout #customerView .customerControl .customerOrder {
  width: var(--width-checkout-customer-control);
}

#posXX #checkout #customerView .customerControl .customerReserve .UILink:before,
#posXX #checkout #customerView .customerControl .customerOrder .UILink:before {
  color: var(--color-checkout-customer-order);
  font-size: var(--font-size-checkout-customer-icon);
  padding: var(--padding-checkout-customer-icon-divider);
  content: "|";
}

#pos #checkout #customerView .customerControl .customerReserve .UILink:after,
#pos #checkout #customerView .customerControl .customerOrder .UILink:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--color-checkout-customer-order);
  font-size: var(--font-size-checkout-customer-icon);
  content: "|";
}

#pos #checkout #customerView .customerControl .customerReserve .UILink:after {
  content: "\f274";
}

#pos #checkout #customerView .customerControl .customerOrder .UILink:after {
  content: "\f022";
}

/********************************      checkout/customerView:END      ********************************/
/********************************      checkout/cartView:START      ********************************/
#checkout #cartView {
  --height-checkout-barcode: 42px;
  --height-checkout-result: 48px;
  --margin-checkout-barcode: 0 0 12px 0;
}

#checkout #cartView #tabCheckout {
  display: flex;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
}

#checkout #cartView #tabCheckout #barcodeView {
  position: relative;
  height: var(--height-checkout-barcode);
  margin: var(--margin-checkout-barcode);
}

#checkout #cartView #tabCheckout #checkoutItemView {
  flex: 1;
  /* 將捲軸改到外面 */
  padding: 0 12px;
  margin: 0 -12px;
}

#checkout #cartView #tabCheckout #checkoutResultView {
  height: var(--height-checkout-result);
}

#checkout #cartView #tabReservation #reservationView {
  overflow-y: auto;
  /* 將捲軸改到外面 */
  padding: 0 12px;
  margin: 0 -12px;
}

/********************************      checkout/cartView:END      ********************************/
/********************************      checkout/barcodeView:START      ********************************/
#pos #checkout #barcodeView {
  --color-checkout-barcode: var(--color-main);
  --color-checkout-barcode_disabled: #eee;
  --font-size-checkout-barcode-icon: 24px;
  --padding-checkout-barcode_input: 0 52px;
}

#pos #checkout #barcodeView #barcodeW {
  height: 100%;
}

#pos #checkout #barcodeView #barcodeW #barcode {
  padding: var(--padding-checkout-barcode_input);
}

#pos #checkout #barcodeView #scanner {
  color: var(--color-checkout-barcode);
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 9;
}
@media (max-width: 768px) {
  #pos #checkout #barcodeView #scanner {
    left: initial;
    right: 56px;
  }
}

#pos #checkout #barcodeView #scanner:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-checkout-barcode-icon);
  line-height: var(--height-checkout-barcode);
  content: "\f464";
}

#pos #checkout #barcodeView #product {
  color: var(--color-checkout-barcode);
  position: absolute;
  top: 0;
  left: 12px;
}

#pos #checkout #barcodeView #product[disabled] {
  color: var(--color-checkout-barcode_disabled);
}

#pos #checkout #barcodeView #product:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-checkout-barcode-icon);
  line-height: var(--height-checkout-barcode);
  content: "\f288";
}

#pos #checkout #barcodeView #keyboard {
  color: var(--color-checkout-barcode);
  position: absolute;
  top: 1px;
  right: 12px;
  z-index: 9;
}

#pos #checkout #barcodeView #keyboard:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-checkout-barcode-icon);
  line-height: var(--height-checkout-barcode);
  content: "\f11c";
  font-size: 28px;
}

#pos #checkout #codeScanner {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  display: none;
  width: 100%;
  height: 120px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 9999;
}

/********************************      checkout/barcodeView:END      ********************************/
/********************************      checkout/checkoutItemView/controlBar:START      ********************************/
#checkout #checkoutItemView .controlBar {
  --background-color-checkout-item-controlbar: var(--color-main);
  --background-color-checkout-item-controlbar_toggle: #ff0d49;
  --background-color-checkout-item-controlbar_quantity: var(--color-secondary);
  --border-checkout-item-controlbar_toggle: 1px solid #ff0d49;
  --font-color-checkout-item-controlbar: #fff;
  --height-checkout-item-controlbar: 32px;
  --text-align-checkout-item-controlbar: center;
  --padding-checkout-item-controlbar: 0 8px;
  --margin-checkout-item-controlbar: 0 2px 6px 2px;
}

#checkout #checkoutItemView .controlBar {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  position: relative;
}

#checkout #checkoutItemView .controlBar .UILink {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-checkout-item-controlbar);
  color: var(--font-color-checkout-item-controlbar);
  text-align: var(--text-align-checkout-item-controlbar);
  height: var(--height-checkout-item-controlbar);
  padding: var(--padding-checkout-item-controlbar);
  margin: var(--margin-checkout-item-controlbar);
}

#checkout #checkoutItemView .controlBar .UILink[data-toggle=true] {
  background-color: var(--background-color-checkout-item-controlbar_toggle);
  border: 1px solid var(--border-checkout-item-controlbar_toggle);
  animation: flicker 1000ms infinite ease-in-out;
}

/** 預購商品 **/
#checkout #checkoutItemView .controlBar #preOrderControl[data-toggle=true]:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f08d";
}

/** 贈品 **/
#checkout #checkoutItemView .controlBar #freebieControl[data-toggle=true]:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f08d";
}

#checkout #checkoutItemView .controlBar .orderQty {
  background-color: var(--background-color-checkout-item-controlbar_quantity);
  cursor: none;
  position: absolute;
  left: 12px;
}

/********************************      checkout/checkoutItemView/controlBar:END      ********************************/
/********************************      checkout/checkoutItemView/checkoutItems:START      ********************************/
#checkout #checkoutItemView .checkoutItems {
  --font-size-checkout-item-items-delete: 22px;
}

#checkout #checkoutItemView .checkoutItems .UIDataColumn {
  position: relative;
}

#checkout #checkoutItemView .checkoutItems .delete:before {
  padding-right: 6px;
  font-size: var(--font-size-checkout-item-items-delete);
  content: "|";
}

#checkout #checkoutItemView .checkoutItems .delete:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-checkout-item-items-delete);
  content: "\f2ed";
}

/********************************      checkout/checkoutItemView/checkoutItems:END      ********************************/
/********************************      checkout/checkoutItemView/checkoutDiscounts:START      ********************************/
#checkout #checkoutItemView .checkoutDiscounts {
  --padding-checkout-item-discounts: 6px 0 12px 0;
  --margin-checkout-item-discounts: 0 0 0 48px;
}

#checkout #checkoutItemView .checkoutDiscounts {
  padding: var(--padding-checkout-item-discounts);
  margin: var(--margin-checkout-item-discounts);
}

/********************************      checkout/checkoutItemView/checkoutDiscounts:END      ********************************/
/********************************      checkout/checkoutItemView/control:START      ********************************/
#checkout #checkoutItemView .control {
  --background-color-checkout-item-control: var(--color-main);
  --background-color-checkout-item-control_disabled: #78a8bf;
  --border-checkout-item-control: 1px solid rgba(0, 0, 0, 0.06);
  --color-checkout-item-control: #fff;
  --height-checkout-item-control: 32px;
  --padding-checkout-item-control: 0 6px;
}

#checkout #checkoutItemView .UIHorizontalLayout .row,
#checkout #checkoutItemView .UIHorizontalLayout .row > div {
  margin: 0;
  padding: 0;
}

#checkout #checkoutItemView .control {
  padding-bottom: 12px;
}

#checkout #checkoutItemView .control .item {
  border-bottom: var(--border-checkout-item-control);
}

#checkout #checkoutItemView .control .item .UILink {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-checkout-item-control);
  color: var(--color-checkout-item-control);
  height: var(--height-checkout-item-control);
  padding: var(--padding-checkout-item-control);
}

#checkout #checkoutItemView .control .item .UILink:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f141";
}

#checkout #checkoutItemView .control .item .UILink[disabled] {
  background-color: var(--background-color-checkout-item-control_disabled);
}

#checkout #checkoutItemView .control .item .UILabel {
  white-space: nowrap;
}

/********************************      checkout/checkoutItemView/control:END      ********************************/
/********************************      checkout/checkoutResultView:START      ********************************/
#checkout #checkoutResultView {
  --background-color-checkout-item-result-button: var(--color-secondary);
}

#checkout #checkoutResultView .UIButton {
  width: 100%;
  height: var(--height-checkout-result);
}

#checkout #checkoutResultView .btnReset {
  background-color: var(--background-color-checkout-item-result-button);
}

/********************************      checkout/checkoutResultView:END      ********************************/
/********************************      delivery_method.inc:START      ********************************/
#delivery_method {
  --margin-delivery-method-button: 6px 0 6px 0;
  --height-delivery-method-button: 48px;
}

#delivery_method .UIButton {
  width: 100%;
  height: var(--height-delivery-method-button);
  margin: var(--margin-delivery-method-button);
}

/********************************      delivery_method.inc:END      ********************************/
/********************************      payment.inc:START      ********************************/
#payment {
  --margin-payment-button: 6px 0 6px 0;
  --height-payment-button: 48px;
}

#payment .UIButton {
  width: 100%;
  height: var(--height-payment-button);
  margin: var(--margin-payment-button);
}

/********************************      payment.inc:END      ********************************/
/********************************      order.inc:START      ********************************/
#order #orderView {
  --height-order-summary-bottom: 75px;
  --height-order-summary-bottom-button: 48px;
  --padding-order-summary-bottom: 12px 24px;
}

#order #orderView.UIHorizontalLayout,
#order #orderView.UIHorizontalLayout > .row,
#order #orderView.UIHorizontalLayout > .row > div {
  height: 100%;
}

#order #orderView #orderSummaryView.UIPanel {
  height: 100%;
}

#order #orderView #orderSummaryView.UIPanel > .content {
  height: calc(100% - var(--height-order-summary-bottom));
  overflow-y: auto;
}

#order #orderView #orderSummaryView.UIPanel > .UIPanelBottom {
  height: var(--height-order-summary-bottom);
  padding: var(--padding-order-summary-bottom);
}

#order #orderView #orderSummaryView.UIPanel > .UIPanelBottom .UIButton {
  height: var(--height-order-summary-bottom-button);
}

/********************************      order.inc:END      ********************************/
/********************************      order_result.inc:END      ********************************/
#order_result {
  --height-order-result-bottom-button: 48px;
  --padding-order-result-bottom: 12px 24px;
  --margin-order-result-bottom-button: 0 0 12px 0;
}

#order_result.UIPanel {
  height: 100%;
}

#order_result.UIPanel > .UIPanelBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--padding-order-result-bottom);
}

#order_result.UIPanel > .UIPanelBottom .UIButton {
  height: var(--height-order-result-bottom-button);
}

#order_result .printControl .UIButton {
  width: 100%;
  height: var(--height-order-result-bottom-button);
  margin: var(--margin-order-result-bottom-button);
}

/********************************      order_result.inc:END      ********************************/
/********************************      customer_order_list.inc:START      ********************************/
#customer_order_list {
  overflow-y: auto;
}

/********************************      customer_order_list.inc:END      ********************************/
/********************************      customer_order_item.inc:START      ********************************/
#customer_order_item {
  --padding-customer-order-item-button: 0 12px;
}

#customer_order_item {
  overflow-y: auto;
}

#customer_order_item.UIPanel > .UIPanelBottom .UIButton {
  padding: var(--padding-customer-order-item-button);
}

/********************************      customer_order_item.inc:END      ********************************/
/********************************      tab_calendar.inc:START      ********************************/
#tab_calendar {
  overflow-y: auto;
}

#tab_calendar .UICalendar.fc .fc-event.green {
  background-color: var(--color-green);
}

#tab_calendar .UICalendar.fc .fc-event.red {
  background-color: var(--color-red);
}

#tab_calendar .UICalendar.fc .fc-event.blue {
  background-color: var(--color-blue);
}

#tab_calendar .UICalendar.fc .fc-event.yellow {
  background-color: var(--color-yellow);
}

#tab_calendar .UICalendar.fc .fc-event.orange {
  background-color: var(--color-orange);
}

#tab_calendar .UICalendar.fc .fc-event.black {
  background-color: var(--color-black);
}

#tab_calendar .UICalendar.fc .fc-event.gray {
  background-color: var(--color-gray);
}

/********************************      tab_calendar.inc:END      ********************************/
/********************************      reservation_list.inc:END      ********************************/
#reservation_list {
  --background-color-reservation-record-date: #eee;
  --border-product-list-item: 1px solid rgba(0, 0, 0, 0.06);
  --font-size-product-list-item-info: 13px;
  --font-size-reservation-record-date_month: 0.8rem;
  --font-size-reservation-record-date_day: 1.2rem;
  --font-size-reservation-record-time: 1rem;
  --font-size-reservation-record-name: 1rem;
  --font-size-reservation-record-note: 0.8rem;
  --font-weight-reservation-record-date_day: 800;
  --text-align-reservation-record-date: center;
  --opacity-product-list-item-info: 0.8;
  --height-product-list-item-info_double: 42px;
  --height-reservation-record-button: 42px;
  --padding-product-list-item: 1px;
  --padding-product-list-item-info: 2px 3px;
  --padding-reservation-record-date: 2px 2px;
  --padding-reservation-record-date_month: 0 3px;
  --padding-reservation-record-date_day: 0 3px;
  --padding-reservation-record-button: 0 8px;
  --padding-reservation-record-button_delete: 0 6px;
  --margin-product-list-item: 3px;
  --margin-reservation-record-date: 0 6px 0 0;
}

/* tabReserve:START */
#reservation_list #tabReserve #reservationListView .UIGridLayout > .row {
  margin-left: 0;
  margin-right: 0;
}

#reservation_list #tabReserve #reservationListView .UIGridLayout > .row > * {
  padding-left: 0;
  padding-right: 0;
}

#reservation_list #tabReserve #reservationListView #productItemView {
  position: relative;
  border: var(--border-product-list-item);
  padding: var(--padding-product-list-item);
  margin: var(--margin-product-list-item);
}

#reservation_list #tabReserve #reservationListView #productItemView .productInfo {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-end;
  -webkit-align-items: flex-end;
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: var(--font-size-product-list-item-info);
  height: var(--height-product-list-item-info_double);
  opacity: var(--opacity-product-list-item-info);
  padding: var(--padding-product-list-item-info);
}

/* tabReservationRecord:START */
#reservation_list #tabReservationRecord .reservationDate {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: row;
}

#reservation_list #tabReservationRecord .reservationDate > .date {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-reservation-record-date);
  text-align: var(--text-align-reservation-record-date);
  padding: var(--padding-reservation-record-date);
  margin: var(--margin-reservation-record-date);
}

#reservation_list #tabReservationRecord .reservationDate > .date > .month {
  font-size: var(--font-size-reservation-record-date_month);
  padding: var(--padding-reservation-record-date_month);
}

#reservation_list #tabReservationRecord .reservationDate > .date > .day {
  font-size: var(--font-size-reservation-record-date_day);
  font-weight: var(--font-weight-reservation-record-date_day);
  padding: var(--padding-reservation-record-date_day);
}

#reservation_list #tabReservationRecord .reservationDate > .time {
  font-size: var(--font-size-reservation-record-time);
}

#reservation_list #tabReservationRecord .reservationName .UILink {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

#reservation_list #tabReservationRecord .reservationName .name {
  font-size: var(--font-size-reservation-record-name);
}

#reservation_list #tabReservationRecord .reservationName .note {
  font-size: var(--font-size-reservation-record-note);
}

#reservation_list #tabReservationRecord .reservationName i.unpaid:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  text-align: center;
  width: 1.25em;
  padding-right: 6px;
  content: "\f07a";
}

#reservation_list #tabReservationRecord .reservationName i.paid:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  text-align: center;
  width: 1.25em;
  padding-right: 6px;
  content: "\f81d";
}

#reservation_list #tabReservationRecord .UIButton {
  height: var(--height-reservation-record-button);
  padding: var(--padding-reservation-record-button);
}

#reservation_list #tabReservationRecord .UIButton.btnDelete:before {
  padding: var(--padding-reservation-record-button_delete);
}

/* tabReservationRecord:END */
/********************************      reservation_list.inc:END      ********************************/
/********************************      screen/checkout_item.inc:START      ********************************/
#checkout_item {
  --background-color-checkout-item: #fff;
  --border-checkout-item-control-item: 1px solid #eee;
  --border-checkout-item-result: 1px solid #eee;
  --height-checkout-item-result: 48px;
  --padding-checkout-item-discounts: 0 6px 12px 48px;
  --padding-checkout-item-control: 0 24px;
  --padding-checkout-item-control-item: 6px 0;
  --padding-checkout-item-result: 12px;
}

#checkout_item #checkoutView {
  background-color: var(--background-color-checkout-item);
  position: relative;
}

#checkout_item #checkoutView #checkoutItemView {
  height: calc(100% - var(--height-checkout-item-result));
  overflow-y: auto;
}

#checkout_item #checkoutView #checkoutItemView .checkoutDiscounts {
  padding: var(--padding-checkout-item-discounts);
}

#checkout_item #checkoutView #checkoutItemView .control {
  padding: var(--padding-checkout-item-control);
}

#checkout_item #checkoutView #checkoutItemView .control .item {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  border-bottom: var(--border-checkout-item-control-item);
  padding: var(--padding-checkout-item-control-item);
}

#checkout_item #checkoutView #checkoutResultView {
  background-color: var(--background-color-checkout-item);
  border-top: var(--border-checkout-item-result);
  height: var(--height-checkout-item-result);
  padding: var(--padding-checkout-item-result);
}

#checkout_item #checkoutView #checkoutResultView .total {
  text-align: right;
}

/********************************      screen/checkout_item.inc:END      ********************************/
/** ANNE:START **/
#checkout #checkoutItemView .control {
  padding-top: 24px;
}

#checkout #checkoutItemView .control .item {
  margin: 3px;
}

#pos #checkout #customerView .customerReserve .UILink:before,
#pos #checkout #customerView .customerOrder .UILink:before,
#pos #checkout #customerView .addCustomer:after {
  color: #e6e6e6;
}

#pos #posControlView.UIPanel > .content {
  justify-content: flex-end;
}

#pos #posControlView.UIPanel > .content > #postFunctionView {
  position: absolute;
  left: 16px;
}

#checkout #checkoutItemView .controlBar .orderQty {
  background-color: #ededed;
  color: #000;
}

#order #orderSummaryView .UITextWrapper, #order #orderSummaryView #btnPayECR, #order #orderSummaryView .UITextWrapper, #order #orderSummaryView #orderDateW {
  margin-bottom: 6px;
}

#order #orderSummaryView .UIForm > table > tbody > tr > td {
  justify-content: flex-end;
}

/** ANNE:END **/
/********************************      style_backsite.less: START      ********************************/
.queryForm {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 24px 24px 12px 24px;
  margin: -24px -24px 0 -24px;
}
@media (min-width: 768px) {
  .queryForm {
    padding: 18px;
    margin: -18px -18px 0 -18px;
  }
}

/********************************      style_backsite.less: END      ********************************/
/********************************      UIButtonGroup: START      ********************************/
.UIButtonGroup > * {
  margin-left: 1px !important;
}

.UIButtonGroup > .UIButton {
  font-size: 0.9rem;
}

/********************************      UIButtonGroup: START      ********************************/
.UIDataTable tbody .UIDataColumn .UIButton,
.UIPaginatedDataTable tbody .UIDataColumn .UIButton {
  font-size: 0.9rem;
}

/********************************      login.less/loginView:START      ********************************/
#login #loginView.UIPanel {
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.6);
}

#login #loginView .UIForm.quickLogin {
  width: 75% !important;
  margin-bottom: 12px;
}

#login #loginView .UIForm.quickLogin > .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-bottom: 0;
  font-size: 0.9rem;
  height: initial;
}

#login #loginView .UIForm.quickLogin > .UIFormItem .UIButton {
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  width: 100%;
}

/********************************      login.less/loginView:END      ********************************/
/********************************      login.less/registerView:END      ********************************/
#register #registerView.UIPanel {
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.6);
}

/********************************      login.less/registerView:START      ********************************/
/********************************      index.less/headerView:START      ********************************/
/** headerLeft:START **/
#headerView .headerLeft .profile .avatar .photo,
#headerView .headerLeft .profile .avatarInfo .UIImage {
  border: 2px solid #e1e1e1;
}

/** headerLeft:END **/
/********************************      index.less/headerView:END      ********************************/
/********************************      index.less/breadcrumbView:START      ********************************/
#breadcrumbView {
  /*
      border: solid rgba(0, 0, 0, .15);
      border-width: 1px 0;
      box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, .1), inset 0 0.125em 0.5em rgba(0, 0, 0, .15); */
}

/********************************      index.less/breadcrumbView:END      ********************************/
/********************************      index.less/mainView:START      ********************************/
#mainView {
  box-shadow: inset 0 2em 1em -1.5em rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 2em 1em -1.5em rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 2em 1em -1.5em rgba(0, 0, 0, 0.1);
  border-top: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0 0 0;
}

/********************************      index.less/mainView:END      ********************************/
/********************************      home.less:START      ********************************/
#home .UIPanel > .top > .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  font-size: 0.8rem;
  height: 24px;
  padding-left: 12px;
}

/********************************      home.less:END      ********************************/
/********************************      account_lock.less:START      ********************************/
#account_lock .btnLogin {
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
}

/********************************      account_lock.less:START      ********************************/