@charset "UTF-8";
/* General */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
div {
  box-sizing: border-box; }

a {
  text-decoration: none; }
  a.link:hover {
    text-decoration: underline;
    color: inherit; }

p {
  margin: 0; }

ul, li {
  list-style: none;
  margin: 0;
  padding: 0; }

body {
  /*height: 100vh;*/
  /*background: $color-bg-white;*/
  background: -webkit-linear-gradient(rgba(137, 124, 255, 0.4), rgba(137, 124, 255, 0) 80%), -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(145, 129, 214, 0.9) 75%);
  margin: 0;
  font-family: "Microsoft JhengHei", "Noto Sans TC", Arial, Helvetica, sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  backface-visibility: unset;
  color: rgba(0, 0, 0, 0.65); }

img {
  display: block;
  max-width: 100%; }

input, select, textarea, .m-tag-wrapper.block, .date-picker-btn, .time-picker, .sel-btns-wrapper, .sel-btns-wrapper .sel-btn, .m-switch, .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tag-wrapper, .condition-selector {
  height: 48px;
  color: #816CD9;
  font-size: 16px;
  font-family: "Microsoft JhengHei";
  border: 2px solid #816CD999;
  border-radius: 8px;
  background: #ffffff;
  outline: 0;
  padding: 6px 16px 7px;
  box-sizing: border-box;
  transition: 0.2s; }
  input:focus, select:focus, textarea:focus, .date-picker-btn:focus, .time-picker:focus, .sel-btns-wrapper:focus, .sel-btns-wrapper .sel-btn:focus, .m-switch:focus, .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name:focus, .m-tag-wrapper:focus, .condition-selector:focus {
    border-color: #56d0e9;
    box-shadow: 0 0 5px #56d0e9; }
  input::placeholder, select::placeholder, textarea::placeholder, .m-tag-wrapper.block::placeholder, .date-picker-btn::placeholder, .time-picker::placeholder, .sel-btns-wrapper::placeholder, .sel-btns-wrapper .sel-btn::placeholder, .m-switch::placeholder, .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name::placeholder, .m-tag-wrapper::placeholder, .condition-selector::placeholder {
    color: #816CD966; }
  input[readonly], select[readonly], select[disabled], textarea[readonly], .date-picker-btn[readonly], .time-picker[readonly], .sel-btns-wrapper[readonly], .sel-btns-wrapper .sel-btn[readonly], .m-switch[readonly], .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name[readonly], .m-tag-wrapper[readonly], .condition-selector[readonly] {
    background: rgba(0, 0, 0, 0.03);
    color: #816CD9;
    cursor: default;
    border: 1px solid rgba(0, 0, 0, 0.1); }
    input[readonly]:focus, select[readonly]:focus, select:focus[disabled], textarea[readonly]:focus, .date-picker-btn[readonly]:focus, .time-picker[readonly]:focus, .sel-btns-wrapper[readonly]:focus, .sel-btns-wrapper .sel-btn[readonly]:focus, .m-switch[readonly]:focus, .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name[readonly]:focus, .m-tag-wrapper[readonly]:focus, .condition-selector[readonly]:focus {
      border-color: #816CD999;
      box-shadow: none; }
  input[type=checkbox], select[type=checkbox], textarea[type=checkbox], .date-picker-btn[type=checkbox], .time-picker[type=checkbox], .sel-btns-wrapper[type=checkbox], .sel-btns-wrapper .sel-btn[type=checkbox], .m-switch[type=checkbox], .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name[type=checkbox], .m-tag-wrapper[type=checkbox], .condition-selector[type=checkbox] {
    height: 20px;
    width: 20px !important;
    border: 1px solid #d7dce0;
    vertical-align: middle; }
  input[type=radio], select[type=radio], textarea[type=radio], .date-picker-btn[type=radio], .time-picker[type=radio], .sel-btns-wrapper[type=radio], .sel-btns-wrapper .sel-btn[type=radio], .m-switch[type=radio], .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name[type=radio], .m-tag-wrapper[type=radio], .condition-selector[type=radio] {
    height: 18px;
    width: 18px !important;
    margin: 0;
    vertical-align: middle; }
    input[type=radio]:focus, select[type=radio]:focus, textarea[type=radio]:focus, .date-picker-btn[type=radio]:focus, .time-picker[type=radio]:focus, .sel-btns-wrapper[type=radio]:focus, .sel-btns-wrapper .sel-btn[type=radio]:focus, .m-switch[type=radio]:focus, .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name[type=radio]:focus, .m-tag-wrapper[type=radio]:focus, .condition-selector[type=radio]:focus {
      box-shadow: none; }
  input.error, select.error, textarea.error, .error.date-picker-btn, .error.time-picker, .error.sel-btns-wrapper, .sel-btns-wrapper .error.sel-btn, .error.m-switch, .m-tree-wrapper:not(.hori) .m-tree-node .error.m-tree-node-name, .error.m-tag-wrapper, .error.condition-selector {
    border-color: #ff0000;
    box-shadow: none; }

select {
  padding: 6px 8px 7px;
  vertical-align: middle; }
  select[disabled] {
    opacity: 1; }
  select:disabled {
    opacity: 1; }

option::-ms-expand {
  display: none; }

textarea, .m-tag-wrapper.block {
  height: 125px;
  resize: none;
  display: block; }

.alarm {
  color: #e93924; }

.success {
  color: #39b55c; }

.blur {
  filter: blur(3px);
  -webkit-filter: blur(3px); }

.hidden {
  visibility: hidden; }

.highlighted {
  color: #f2f2ff; }

.invisible {
  opacity: 0; }

.left-align {
  text-align: left; }

.right-align {
  text-align: right; }

.center-align {
  text-align: center; }

.not-displaying {
  display: none !important; }

.centered, .panel-float, .time-picker-panel, .multi-selector-panel, .panel-float .insruction .btn, .time-picker-panel .insruction .btn, .multi-selector-panel .insruction .btn, .time-picker-panel .time-code-wrapper:after, .time-picker-panel .time-code-wrapper .time-code, .time-picker-panel .clock-wrapper .clock, .event-wrapper .card .status .text, .dropzone .dz-message, .dz-preview .dz-image img, .dz-preview .dz-image i, .m-more-wrap .icon img, .m-more-wrap .m-collapse .collapse-head .arrow img, .m-collapse .collapse-head .m-more-wrap .arrow img, .m-more-wrap .m-collapse .sub-head .arrow img, .m-collapse .sub-head .m-more-wrap .arrow img, .msg-no-current-eval {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.float-left {
  float: left; }

.float-right {
  float: right; }

.panel-float, .time-picker-panel, .multi-selector-panel {
  margin-top: -5%;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.65);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.075), 0 6px 50px rgba(0, 0, 0, 0.275);
  border-radius: 8px; }
  .panel-float .insruction, .time-picker-panel .insruction, .multi-selector-panel .insruction {
    width: 100%;
    height: 80px;
    position: relative; }
    .panel-float .insruction .btn, .time-picker-panel .insruction .btn, .multi-selector-panel .insruction .btn {
      left: 20%;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 3px;
      transition: 0.2s; }
      .panel-float .insruction .btn:last-of-type, .time-picker-panel .insruction .btn:last-of-type, .multi-selector-panel .insruction .btn:last-of-type {
        left: 80%; }
      .panel-float .insruction .btn:hover, .time-picker-panel .insruction .btn:hover, .multi-selector-panel .insruction .btn:hover {
        background: #3fa7d6;
        color: #ffffff; }

.validate-error, .tbl-col-like.invalid, .m-table .tbl-body .invalid.tbl-col, .m-table-std .tbl-body .invalid.tbl-col, .wrapper-body .invalid.tbl-col {
  border-color: #ffffff;
  background: rgba(255, 0, 0, 0.4) !important;
  color: #ffffff;
  border-bottom-color: #ffffff !important; }

.fa-star {
  transition: 0.2s; }
  .fa-star.fas {
    color: #f9ce00; }

::-webkit-scrollbar-track {
  background-color: transparent;
  position: relative; }

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
  position: absolute;
  right: -20px; }

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: absolute;
  right: -20px;
  cursor: pointer; }
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25); }

::-webkit-scrollbar-corner {
  background-color: transparent; }

/* animation for spinning */
@keyframes spin {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg); } }

/* 各種按鈕 */
.m-btn, .m-label, .daterangepicker .btn {
  height: 32px;
  padding: 6px 12px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.02);
  text-align: center;
  border-radius: 3px;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  transition: .1s;
  cursor: pointer;
  user-select: none; }
  .m-btn.pressed, .pressed.m-label, .daterangepicker .pressed.btn {
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.2), inset 0 8px 8px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0 0 0 transparent);
    padding: 7px 5px 12px; }
  .m-btn.deactivate, .deactivate.m-label, .daterangepicker .deactivate.btn {
    opacity: 0.5;
    filter: brightness(1);
    cursor: default; }
    .m-btn.deactivate:hover:after, .deactivate.m-label:hover:after, .daterangepicker .deactivate.btn:hover:after {
      background: transparent; }
  .m-btn.normal, .normal.m-label, .daterangepicker .normal.btn {
    background: #816CD9;
    color: #ffffff;
    border: 1px solid #816CD9;
    border-top: 0;
    border-bottom: 0; }
  .m-btn.normal-lighter, .normal-lighter.m-label, .daterangepicker .normal-lighter.btn {
    background: #d9d9ff; }
  .m-btn.alter, .m-btn.neutral:hover, .m-btn.low-profile:hover, .low-profile.m-label:hover, .daterangepicker .low-profile.btn:hover, .neutral.m-label:hover, .daterangepicker .neutral.btn:hover, .alter.m-label, .daterangepicker .alter.btn {
    background: #f2f2ff;
    border: 1px solid #d9d9ff;
    color: #816CD9; }
  .m-btn.alarm, .alarm.m-label, .daterangepicker .alarm.btn {
    color: white;
    background: #d76161; }
  .m-btn.neutral, .m-btn.low-profile, .low-profile.m-label, .daterangepicker .low-profile.btn, .neutral.m-label, .daterangepicker .neutral.btn {
    background: #ffffff;
    color: #816CD9;
    border: 1px solid #816CD9; }
    .m-btn.neutral:hover, .m-btn.low-profile:hover, .low-profile.m-label:hover, .daterangepicker .low-profile.btn:hover, .neutral.m-label:hover, .daterangepicker .neutral.btn:hover {
      border-color: #816CD9; }
  .m-btn.low-profile, .low-profile.m-label, .daterangepicker .low-profile.btn {
    background: transparent;
    border-color: transparent;
    transition: 0.2s; }
    .m-btn.low-profile:hover, .low-profile.m-label:hover, .daterangepicker .low-profile.btn:hover {
      background: #ffffff;
      border-color: #816CD9; }
  .m-btn.list, .list.m-label, .daterangepicker .list.btn {
    border: 1px solid #eaeaea;
    color: rgba(0, 0, 0, 0.65);
    text-align: left; }
    .m-btn.list:hover, .list.m-label:hover, .daterangepicker .list.btn:hover {
      background: rgba(0, 0, 0, 0.02);
      border: 1px solid #cccccc; }
  .m-btn.add, .add.m-label, .daterangepicker .add.btn {
    background: #f2f2ff;
    border: 1px solid #d9d9ff;
    color: #816CD9; }
  .m-btn.thinner, .thinner.m-label, .daterangepicker .thinner.btn {
    height: 22px;
    line-height: 10px; }
  .m-btn.thicker, .thicker.m-label, .daterangepicker .thicker.btn {
    height: 48px;
    line-height: 36px; }
  .m-btn.shortest, .shortest.m-label, .daterangepicker .shortest.btn {
    width: 64px; }
  .m-btn.shorter, .shorter.m-label, .daterangepicker .shorter.btn {
    width: 96px; }
  .m-btn.short, .short.m-label, .daterangepicker .short.btn {
    width: 128px; }
  .m-btn.long, .long.m-label, .daterangepicker .long.btn {
    width: 160px; }
  .m-btn.longest, .longest.m-label, .daterangepicker .longest.btn {
    width: 256px; }
  .m-btn.shrink, .m-btn.icon, .icon.m-label, .m-collapse .collapse-head .m-label.arrow, .m-collapse .sub-head .m-label.arrow, .daterangepicker .icon.btn, .daterangepicker .m-collapse .collapse-head .btn.arrow, .m-collapse .collapse-head .daterangepicker .btn.arrow, .daterangepicker .m-collapse .sub-head .btn.arrow, .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .m-btn.arrow, .m-collapse .sub-head .m-btn.arrow, .shrink.m-label, .daterangepicker .shrink.btn {
    width: auto;
    padding: 6px; }
  .m-btn.fluid, .fluid.m-label, .daterangepicker .fluid.btn {
    width: 100%; }
  .m-btn.icon, .icon.m-label, .m-collapse .collapse-head .m-label.arrow, .m-collapse .sub-head .m-label.arrow, .daterangepicker .icon.btn, .daterangepicker .m-collapse .collapse-head .btn.arrow, .m-collapse .collapse-head .daterangepicker .btn.arrow, .daterangepicker .m-collapse .sub-head .btn.arrow, .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .m-btn.arrow, .m-collapse .sub-head .m-btn.arrow {
    height: unset;
    color: rgba(0, 0, 0, 0.25);
    padding: 0; }
    .m-btn.icon:hover, .icon.m-label:hover, .m-collapse .collapse-head .m-label.arrow:hover, .m-collapse .sub-head .m-label.arrow:hover, .daterangepicker .icon.btn:hover, .daterangepicker .m-collapse .collapse-head .btn.arrow:hover, .m-collapse .collapse-head .daterangepicker .btn.arrow:hover, .daterangepicker .m-collapse .sub-head .btn.arrow:hover, .m-collapse .sub-head .daterangepicker .btn.arrow:hover, .m-collapse .collapse-head .m-btn.arrow:hover, .m-collapse .sub-head .m-btn.arrow:hover {
      color: #816CD9; }
    .m-btn.icon.deactivate, .icon.deactivate.m-label, .m-collapse .collapse-head .deactivate.m-label.arrow, .m-collapse .sub-head .deactivate.m-label.arrow, .daterangepicker .icon.deactivate.btn, .daterangepicker .m-collapse .collapse-head .deactivate.btn.arrow, .m-collapse .collapse-head .daterangepicker .deactivate.btn.arrow, .daterangepicker .m-collapse .sub-head .deactivate.btn.arrow, .m-collapse .sub-head .daterangepicker .deactivate.btn.arrow, .m-collapse .collapse-head .m-btn.deactivate.arrow, .m-collapse .sub-head .m-btn.deactivate.arrow {
      opacity: 1; }
      .m-btn.icon.deactivate:hover, .icon.deactivate.m-label:hover, .m-collapse .collapse-head .deactivate.m-label.arrow:hover, .m-collapse .sub-head .deactivate.m-label.arrow:hover, .daterangepicker .icon.deactivate.btn:hover, .daterangepicker .m-collapse .collapse-head .deactivate.btn.arrow:hover, .m-collapse .collapse-head .daterangepicker .deactivate.btn.arrow:hover, .daterangepicker .m-collapse .sub-head .deactivate.btn.arrow:hover, .m-collapse .sub-head .daterangepicker .deactivate.btn.arrow:hover, .m-collapse .collapse-head .m-btn.deactivate.arrow:hover, .m-collapse .sub-head .m-btn.deactivate.arrow:hover {
        color: rgba(0, 0, 0, 0.25); }
  .m-btn.text, .text.m-label, .daterangepicker .text.btn {
    height: auto;
    color: #816CD9;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .m-btn.text:hover:not(.deactivate), .text.m-label:hover:not(.deactivate), .daterangepicker .text.btn:hover:not(.deactivate) {
      box-shadow: 0 1px #816CD9; }
  .m-btn.icon-end > div, .icon-end.m-label > div, .daterangepicker .icon-end.btn > div {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; }
  .m-btn.icon-end i, .icon-end.m-label i, .daterangepicker .icon-end.btn i {
    margin-right: 0 !important;
    margin-left: 5px; }
  .m-btn i.wait-icon, .m-label i.wait-icon, .daterangepicker .btn i.wait-icon {
    margin-right: 0; }
  .m-btn i:first-child, .m-label i:first-child, .daterangepicker .btn i:first-child {
    margin-right: 5px; }
  .m-btn i:only-child, .m-label i:only-child, .daterangepicker .btn i:only-child {
    margin-right: 0; }
  .m-btn span, .m-label span, .daterangepicker .btn span {
    vertical-align: top !important; }

.date-picker-btn {
  width: 100%;
  border: 1px solid #816CD999;
  color: rgba(0, 0, 0, 0.45);
  color: #816CD9;
  cursor: pointer;
  display: inline-block;
  text-align: center; }
  .date-picker-btn i {
    margin-right: 5px; }

/* 與按鈕同風格的標籤 */
.m-label {
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  cursor: default; }
  .m-label.close {
    background: #ebebeb;
    border-bottom: 0;
    color: rgba(0, 0, 0, 0.45); }
  .m-label.normal {
    background: #007bff; }
  .m-label.normal-lighter {
    background: #f2f2ff;
    color: rgba(0, 0, 0, 0.65); }
  .m-label.alter, .m-label.m-btn.neutral:hover, .m-label.m-btn.low-profile:hover {
    background: #f6ae41;
    border-color: #f6ae41;
    color: #ffffff; }
  .m-label.alarm {
    border-color: #d76161; }
  .m-label.neutral, .m-label.m-btn.low-profile {
    border-color: rgba(0, 0, 0, 0.45); }
    .m-label.neutral:hover, .m-label.m-btn.low-profile:hover {
      background: #ffffff;
      border-color: rgba(0, 0, 0, 0.45); }
  .m-label.confirm {
    background: #2eb82e;
    color: #ffffff; }

/* 預設空白頁面訊息 */
.default-blank {
  width: 100%;
  min-height: 130px;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  display: none; }
  .default-blank:only-child {
    display: block; }
  .default-blank .msg {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.45); }
    .default-blank .msg i {
      display: block;
      font-size: 60px;
      color: rgba(0, 0, 0, 0.06);
      margin-bottom: 15px; }

/* 右鍵選單 */
.contextMenu {
  min-width: 120px;
  min-height: 10px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 15px rgba(0, 0, 0, 0.15);
  position: fixed;
  padding: 5px 0;
  z-index: 2100; }
  .contextMenu .option {
    padding: 6px 12px;
    transition: 0.2s;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer; }
    .contextMenu .option:hover {
      background: rgba(0, 0, 0, 0.07); }
    .contextMenu .option.disable {
      cursor: default;
      background: transparent;
      color: rgba(0, 0, 0, 0.45); }

/* 日期選擇器樣式 */
.daterangepicker {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 15px rgba(0, 0, 0, 0.15);
  z-index: 3000; }
  .daterangepicker .off {
    color: rgba(0, 0, 0, 0.1) !important; }
  .daterangepicker .btn {
    display: inline-block;
    border: 0; }
    .daterangepicker .btn.cancelBtn {
      background: #d76161;
      color: #ffffff; }
    .daterangepicker .btn.applyBtn {
      background: #816CD9;
      color: #ffffff; }
  .daterangepicker td.active {
    background-color: #d9d9ff !important;
    color: #816CD9 !important; }
  .daterangepicker .drp-selected {
    float: left;
    line-height: 33px; }
    .daterangepicker .drp-selected:before {
      content: '已選區間：';
      margin-right: 5px; }
  .daterangepicker .clear-picker {
    width: 100%;
    box-sizing: border-box;
    text-align: right; }
    .daterangepicker .clear-picker .clear-icon {
      position: initial;
      display: inline-block;
      font-size: 16px;
      margin: 0 8px 8px 0;
      padding: 4px 8px;
      border-radius: 3px;
      cursor: pointer; }
      .daterangepicker .clear-picker .clear-icon:hover {
        background: #816CD9;
        color: #ffffff; }

/* 時間選擇器樣式 */
.time-picker-panel {
  width: 300px; }
  .time-picker-panel .time-code-wrapper {
    height: 90px;
    width: 100%;
    position: relative;
    padding: 20px;
    padding-bottom: 5px;
    box-sizing: border-box;
    font-size: 70px;
    background: #3fa7d6;
    border-radius: 5px 5px 0 0;
    color: rgba(0, 0, 0, 0.02); }
    .time-picker-panel .time-code-wrapper:after {
      margin-top: -4px;
      content: ':';
      display: block; }
    .time-picker-panel .time-code-wrapper .time-code .num {
      margin: 15px;
      cursor: pointer;
      transition: 0.2s; }
      .time-picker-panel .time-code-wrapper .time-code .num:not(.selected) {
        color: rgba(0, 0, 0, 0.03); }
  .time-picker-panel .indi-wrapper {
    width: 100%;
    height: 2px;
    background: #3fa7d6;
    position: relative; }
    .time-picker-panel .indi-wrapper .indicator {
      height: 100%;
      width: 50%;
      left: 0;
      background: #f9ce00;
      display: block;
      position: absolute;
      transition: 0.2s; }
      .time-picker-panel .indi-wrapper .indicator.shift {
        left: 50%; }
  .time-picker-panel .clock-wrapper {
    width: 100%;
    height: 150px;
    margin: 80px 0; }
    .time-picker-panel .clock-wrapper .clock {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      transition: .5s;
      z-index: 1; }
      .time-picker-panel .clock-wrapper .clock.minute {
        width: 210px;
        height: 210px; }
      .time-picker-panel .clock-wrapper .clock.dismiss {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
        z-index: 0; }
      .time-picker-panel .clock-wrapper .clock .tick {
        width: 20px;
        height: 20px;
        position: absolute;
        transform: translate(-50%, 50%);
        text-align: center;
        padding: 10px;
        border-radius: 50%;
        transition: 0.2s;
        font-size: 18px;
        cursor: pointer; }
        .time-picker-panel .clock-wrapper .clock .tick:hover {
          background: rgba(255, 0, 0, 0.2); }
        .time-picker-panel .clock-wrapper .clock .tick.outer {
          font-size: 16px; }

/* 複數選擇器樣式 */
.multi-selector-panel {
  width: 630px;
  z-index: 2100; }
  .multi-selector-panel.simple {
    width: 100%;
    top: 100%;
    left: 0;
    margin-top: 0;
    transform: translate(0px, 0px);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 15px rgba(0, 0, 0, 0.15); }
    .multi-selector-panel.simple ul, .multi-selector-panel.simple li {
      padding-left: 0; }
      .multi-selector-panel.simple ul li, .multi-selector-panel.simple li li {
        margin: 10px 0; }
        .multi-selector-panel.simple ul li input, .multi-selector-panel.simple li li input, .multi-selector-panel.simple ul li select, .multi-selector-panel.simple li li select, .multi-selector-panel.simple ul li textarea, .multi-selector-panel.simple li li textarea, .multi-selector-panel.simple ul li .date-picker-btn, .multi-selector-panel.simple li li .date-picker-btn, .multi-selector-panel.simple ul li .time-picker, .multi-selector-panel.simple li li .time-picker, .multi-selector-panel.simple ul li .sel-btns-wrapper, .multi-selector-panel.simple li li .sel-btns-wrapper, .multi-selector-panel.simple ul li .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .multi-selector-panel.simple ul li .sel-btn, .multi-selector-panel.simple li li .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .multi-selector-panel.simple li li .sel-btn, .multi-selector-panel.simple ul li .m-switch, .multi-selector-panel.simple li li .m-switch, .multi-selector-panel.simple ul li .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .multi-selector-panel.simple ul li .m-tree-node-name, .multi-selector-panel.simple li li .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .multi-selector-panel.simple li li .m-tree-node-name, .multi-selector-panel.simple ul li .m-tag-wrapper, .multi-selector-panel.simple li li .m-tag-wrapper, .multi-selector-panel.simple ul li .condition-selector, .multi-selector-panel.simple li li .condition-selector {
          margin-right: 5px; }
        .multi-selector-panel.simple ul li label, .multi-selector-panel.simple li li label {
          cursor: pointer;
          text-align: left !important; }
  .multi-selector-panel .checking-area {
    padding: 0 10px; }

/* Selecting Button */
.sel-btns-wrapper {
  width: auto !important;
  display: inline-block;
  padding: 0;
  cursor: default; }
  .sel-btns-wrapper.locked .sel-btn {
    cursor: default;
    background: rgba(0, 0, 0, 0.03); }
    .sel-btns-wrapper.locked .sel-btn:hover:not(.selected) {
      background: rgba(0, 0, 0, 0.03); }
  .sel-btns-wrapper .sel-btn {
    width: auto !important;
    height: 32px;
    box-sizing: border-box;
    border: 0;
    border-right: 1px solid #816CD999;
    border-radius: 0;
    background: transparent;
    display: inline-block;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.65); }
    .sel-btns-wrapper .sel-btn:hover {
      background: #d9d9ff;
      background: #f2f2ff; }
    .sel-btns-wrapper .sel-btn:first-child {
      border-radius: 2px 0 0 2px; }
    .sel-btns-wrapper .sel-btn:last-child {
      border-right: 0;
      border-radius: 0 2px 2px 0; }
    .sel-btns-wrapper .sel-btn.selected {
      color: #ffffff;
      color: rgba(0, 0, 0, 0.65);
      background: #816CD9;
      background: #d9d9ff; }

/* Item Checker */
.item-checker {
  margin: 20px 0; }
  .item-checker .checker-title {
    color: #ffffff;
    padding: 8px 15px;
    text-align: center;
    background: #816CD9; }
    .item-checker .checker-title .op {
      padding: 2px 10px;
      float: right;
      font-size: 12px;
      margin-left: 10px;
      box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.1), inset 0 5px 3px rgba(0, 0, 0, 0.06), inset 0 -5px 5px rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      cursor: pointer; }
      .item-checker .checker-title .op i {
        margin-right: 5px; }
  .item-checker .default-blank {
    display: none;
    border: 1px solid #cccccc; }
    .item-checker .default-blank:last-child {
      display: block; }
  .item-checker .checker-row {
    display: flex;
    justify-content: space-between; }
    .item-checker .checker-row .checker-col {
      flex: 1;
      height: 48px;
      line-height: 30px;
      padding: 8px 15px;
      color: rgba(0, 0, 0, 0.65);
      box-sizing: border-box;
      border-right: 1px solid #816CD999;
      border-bottom: 1px solid #816CD999;
      transition: 0.2s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer; }
      .item-checker .checker-row .checker-col:hover {
        background: rgba(0, 0, 0, 0.03); }
      .item-checker .checker-row .checker-col:first-child {
        border-left: 1px solid #816CD999; }
      .item-checker .checker-row .checker-col.selected {
        background: rgba(0, 0, 0, 0.03); }
        .item-checker .checker-row .checker-col.selected i {
          color: #816CD9; }
      .item-checker .checker-row .checker-col.require {
        background: rgba(0, 0, 0, 0.07);
        cursor: default; }
      .item-checker .checker-row .checker-col i {
        width: 15px;
        margin-right: 5px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 18px;
        vertical-align: middle; }

/* Stack Bar */
.stack-bar {
  width: 100%;
  height: 23px;
  line-height: 23px;
  background: #f2f2f2;
  border-radius: 5px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1), inset 0 5px 5px rgba(0, 0, 0, 0.1);
  position: relative; }
  .stack-bar:hover .detail {
    opacity: 1;
    display: block; }
  .stack-bar.progress .bar-sec .label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important; }
  .stack-bar .detail {
    position: absolute;
    background: #ffffff;
    color: rgba(0, 0, 0, 0.45);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.375);
    top: 50%;
    transform: translate(calc(-100% - 10px), -50%);
    transition: 0.2s;
    opacity: 0;
    display: none; }
    .stack-bar .detail .detail-row {
      display: block; }
      .stack-bar .detail .detail-row .color-indicator {
        display: inline-block;
        width: 20px;
        height: 10px;
        border-radius: 5px;
        margin-right: 5px; }
  .stack-bar .bar-sec {
    height: 100%;
    display: inline-block;
    color: rgba(0, 0, 0, 0.02);
    text-shadow: 0 1px 0 #666666;
    text-align: center;
    overflow: hidden; }
    .stack-bar .bar-sec:first-of-type {
      border-radius: 5px 0 0 5px;
      box-sizing: border-box;
      text-align: left; }
      .stack-bar .bar-sec:first-of-type .label {
        margin-left: 20px; }
    .stack-bar .bar-sec:last-of-type {
      border-radius: 0 5px 5px 0; }
    .stack-bar .bar-sec:only-of-type {
      border-radius: 5px; }

/* Switch 樣式 */
.m-switch {
  padding: 0;
  border-radius: 3px;
  overflow: hidden; }
  .m-switch.simple {
    width: 40px !important;
    height: 20px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.03); }
    .m-switch.simple:has(.options-wrapper.on) {
      background: #2eb82e; }
    .m-switch.simple .options-wrapper {
      height: 100%; }
      .m-switch.simple .options-wrapper.on {
        transform: translateX(calc(-100% + 18px)); }
      .m-switch.simple .options-wrapper .opt {
        padding: 0;
        width: 20px;
        height: 20px;
        vertical-align: top;
        background: transparent !important; }
      .m-switch.simple .options-wrapper .pivot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-top: -1px;
        margin-left: -1px;
        box-sizing: border-box; }
  .m-switch .options-wrapper {
    white-space: nowrap;
    position: relative;
    transition: .5s;
    cursor: pointer; }
    .m-switch .options-wrapper.on {
      transform: translateX(calc(-100% + 7px)); }
    .m-switch .options-wrapper.locked {
      cursor: default; }
    .m-switch .options-wrapper .opt {
      width: calc(100% - 7px);
      height: 100%;
      padding: 6px 12px 7px;
      box-sizing: border-box;
      color: rgba(0, 0, 0, 0.65);
      background: #d9d9ff;
      display: inline-block;
      text-align: center; }
      .m-switch .options-wrapper .opt:first-of-type {
        color: rgba(0, 0, 0, 0.25);
        background: rgba(0, 0, 0, 0.03); }
    .m-switch .options-wrapper .pivot {
      width: 5px;
      height: 100%;
      border-left: 1px solid #816CD999;
      border-right: 1px solid #816CD999;
      background: #ffffff;
      display: inline-block; }

/* 狀態欄位樣式 */
.status-text.initial {
  color: #cccccc; }

.status-text.wait {
  color: #1aa3ff; }

.status-text.complete {
  color: #00cc00; }

.status-text.process {
  color: #ff8c1a; }

.status-text.fail {
  color: #ff4d4d; }

.selected .status-text {
  color: inherit; }

/* 頁籤樣式 */
.tab-page-container:not(:last-child) {
  margin-bottom: 20px; }

.tab-page-container.no-frame > .tabs {
  background: #ffffff;
  padding-left: 56px; }
  .tab-page-container.no-frame > .tabs > .tab {
    color: rgba(0, 0, 0, 0.65);
    border: 0;
    margin-right: 0; }
    .tab-page-container.no-frame > .tabs > .tab.active {
      color: #816CD9;
      border: 0;
      border-bottom: 3px solid #816CD9; }
      .tab-page-container.no-frame > .tabs > .tab.active:hover {
        border-bottom: 3px solid #816CD9; }
    .tab-page-container.no-frame > .tabs > .tab:hover {
      background: transparent; }

.tab-page-container.no-frame > .tab-pages {
  border: 0;
  border-radius: 0;
  background: transparent; }

.tab-page-container .tabs {
  color: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: -1px;
  box-sizing: border-box; }
  .tab-page-container .tabs .tab {
    padding: 10px 15px;
    color: rgba(0, 0, 0, 0.25);
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    display: inline-block;
    cursor: pointer; }
    .tab-page-container .tabs .tab:not(:last-child) {
      margin-right: 2px; }
    .tab-page-container .tabs .tab.active {
      color: rgba(0, 0, 0, 0.65);
      border: 1px solid #816CD999;
      border-bottom-color: #ffffff;
      background: #ffffff;
      cursor: default; }
      .tab-page-container .tabs .tab.active:hover {
        background: #ffffff;
        border-bottom-color: #ffffff; }
    .tab-page-container .tabs .tab:hover {
      color: rgba(0, 0, 0, 0.65);
      border-color: 1px solid #816CD999;
      background: rgba(0, 0, 0, 0.03); }

.tab-page-container .tab-pages {
  width: 100%;
  min-height: 200px;
  border: 1px solid #816CD999;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  background: #ffffff; }
  .tab-page-container .tab-pages .tab-page {
    min-height: 200px;
    padding: 23px;
    display: none;
    box-sizing: border-box; }
    .tab-page-container .tab-pages .tab-page.active {
      display: block; }

/* 搜尋區樣式 */
/* 可收折區塊 */
.m-collapse {
  border: 1px solid #816CD999;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1);
  overflow: hidden;
  background: #ffffff; }
  .m-collapse.no-frame .collapse-body, .m-collapse.no-frame .sub-body {
    padding: 0; }
  .m-collapse.show-overflow.collapsed {
    overflow: visible; }
  .m-collapse.simpler .collapse-head, .m-collapse.simpler .sub-head {
    background: transparent;
    color: rgba(0, 0, 0, 0.65);
    font-weight: bold;
    cursor: default; }
    .m-collapse.simpler .collapse-head .arrow, .m-collapse.simpler .sub-head .arrow {
      color: rgba(0, 0, 0, 0.65); }
  .m-collapse.collapsed > .collapse-head .arrow, .m-collapse.collapsed > .sub-head .arrow {
    transform: rotate(180deg); }
  .m-collapse:not(:last-child) {
    margin-bottom: 10px; }
  .m-collapse:only-child {
    margin-bottom: 0; }
  .m-collapse .m-collapse {
    border: 0;
    margin-bottom: 0; }
    .m-collapse .m-collapse .collapse-head, .m-collapse .m-collapse .sub-head {
      border-top: 1px solid #eaeaea; }
  .m-collapse .collapse-head, .m-collapse .sub-head {
    color: rgba(0, 0, 0, 0.65);
    padding: 17px 32px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center; }
    .m-collapse .collapse-head.fixed, .m-collapse .fixed.sub-head {
      cursor: default; }
    .m-collapse .collapse-head .dscr, .m-collapse .sub-head .dscr {
      font-size: 18px;
      margin-right: 10px;
      vertical-align: middle; }
    .m-collapse .collapse-head .m-btn, .m-collapse .sub-head .m-btn, .m-collapse .collapse-head .m-label, .m-collapse .sub-head .m-label, .m-collapse .collapse-head .daterangepicker .btn, .daterangepicker .m-collapse .collapse-head .btn, .m-collapse .sub-head .daterangepicker .btn, .daterangepicker .m-collapse .sub-head .btn {
      vertical-align: middle; }
    .m-collapse .collapse-head .icon, .m-collapse .sub-head .icon, .m-collapse .collapse-head .arrow, .m-collapse .sub-head .arrow {
      white-space: nowrap;
      margin-right: 10px;
      margin-top: 3px; }
      .m-collapse .collapse-head .icon i, .m-collapse .sub-head .icon i, .m-collapse .collapse-head .arrow i, .m-collapse .sub-head .arrow i {
        font-size: 16px; }
      .m-collapse .collapse-head .icon .default-icon, .m-collapse .sub-head .icon .default-icon, .m-collapse .collapse-head .arrow .default-icon, .m-collapse .sub-head .arrow .default-icon {
        width: 8px;
        height: 8px;
        background: #A3C4F9;
        border-radius: 1px;
        display: inline-block; }
    .m-collapse .collapse-head .arrow, .m-collapse .sub-head .arrow {
      transition: 0.2s;
      margin-left: auto;
      height: 16px; }
    .m-collapse .collapse-head .option-wrap, .m-collapse .sub-head .option-wrap {
      font-size: 16px;
      vertical-align: middle;
      margin-right: 32px;
      display: inline-block; }
      .m-collapse .collapse-head .option-wrap .m-row, .m-collapse .sub-head .option-wrap .m-row {
        margin: 0;
        padding: 0; }
  .m-collapse .collapse-body, .m-collapse .sub-body {
    padding: 25px 40px; }
  .m-collapse .sub-head {
    padding-top: 16px;
    padding-bottom: 0;
    border-bottom: 0;
    border-top: 1px solid #eaeaea;
    cursor: default; }
    .m-collapse .sub-head:empty {
      padding: 0; }

/* 搜尋區樣式 */
.search-area .collapse-body, .search-area .m-collapse .sub-body, .m-collapse .search-area .sub-body {
  padding: 0; }

.search-area .search-body, .search-area .search-operation {
  margin: 0;
  padding: 25px 0px 15px 40px;
  background: #ffffff;
  vertical-align: top; }
  .search-area .search-body .m-row, .search-area .search-operation .m-row {
    padding: 0;
    margin: 0; }
    .search-area .search-body .m-row .col-sec, .search-area .search-operation .m-row .col-sec {
      margin-bottom: 10px; }

.search-area .search-operation {
  padding-right: 40px; }
  .search-area .search-operation .m-row {
    padding: 0;
    margin: 0; }
  .search-area .search-operation .col-sec {
    margin-bottom: unset; }

/* 可收折區塊包 */
.m-collapse-bundle .sec.collapsed .sec-head {
  border-bottom: 1px solid #cccccc; }
  .m-collapse-bundle .sec.collapsed .sec-head i {
    transform: rotate(180deg); }

.m-collapse-bundle .sec.collapsed .sec-body {
  height: auto;
  padding: 20px 0; }

.m-collapse-bundle .sec:not(:last-child).collapsed .sec-body {
  border-bottom: 1px solid #cccccc; }

.m-collapse-bundle .sec:last-child:not(.collapsed) .sec-head {
  border-bottom: 0; }

.m-collapse-bundle .sec:first-of-type {
  border-top: 1px solid #cccccc; }

.m-collapse-bundle .sec .sec-head {
  background: #f2f2ff;
  color: rgba(0, 0, 0, 0.65);
  padding: 10px;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: top;
  cursor: pointer; }
  .m-collapse-bundle .sec .sec-head i {
    font-size: 16px;
    transition: 0.2s;
    margin-right: 10px; }
  .m-collapse-bundle .sec .sec-head .right-side {
    float: right; }
    .m-collapse-bundle .sec .sec-head .right-side .m-row {
      margin: 0;
      padding: 0; }

.m-collapse-bundle .sec .sec-body {
  transition: 0.2s;
  height: 0px;
  overflow: hidden;
  padding: 0;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc; }

/* 表格樣式 */
.tbl-head-like, .m-table .tbl-head, .m-table-std .tbl-head, .front-panel.head-front {
  color: rgba(0, 0, 0, 0.65);
  font-weight: bold;
  height: 40px;
  z-index: 5; }
  .tbl-head-like.t2, .m-table .t2.tbl-head, .m-table-std .t2.tbl-head, .t2.front-panel.head-front {
    height: 80px; }
    .tbl-head-like.t2 > .head-sec, .m-table .t2.tbl-head > .head-sec, .m-table-std .t2.tbl-head > .head-sec, .t2.front-panel.head-front > .head-sec {
      height: inherit;
      line-height: calc(40px * 2 - 9px * 2); }
    .tbl-head-like.t2 .head-tier, .m-table .t2.tbl-head .head-tier, .m-table-std .t2.tbl-head .head-tier, .t2.front-panel.head-front .head-tier {
      height: inherit; }
  .tbl-head-like.t3, .m-table .t3.tbl-head, .m-table-std .t3.tbl-head, .t3.front-panel.head-front {
    height: 120px; }
  .tbl-head-like .head-sec, .m-table .tbl-head .head-sec, .m-table-std .tbl-head .head-sec, .front-panel.head-front .head-sec {
    height: 40px;
    padding: 9px 8px;
    display: inline-block;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), #FFFFFF;
    border-right: 1px solid #816CD999;
    border-bottom: 1px solid #816CD999;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .tbl-head-like .head-sec.wrap, .m-table .tbl-head .head-sec.wrap, .m-table-std .tbl-head .head-sec.wrap, .front-panel.head-front .head-sec.wrap {
      display: block;
      text-align: center; }
    .tbl-head-like .head-sec:last-child, .m-table .tbl-head .head-sec:last-child, .m-table-std .tbl-head .head-sec:last-child, .front-panel.head-front .head-sec:last-child {
      border-right: 0; }
    .tbl-head-like .head-sec .col-name, .m-table .tbl-head .head-sec .col-name, .m-table-std .tbl-head .head-sec .col-name, .front-panel.head-front .head-sec .col-name {
      line-height: calc(40px - 9px * 2); }
    .tbl-head-like .head-sec .m-btn, .m-table .tbl-head .head-sec .m-btn, .m-table-std .tbl-head .head-sec .m-btn, .front-panel.head-front .head-sec .m-btn, .tbl-head-like .head-sec .m-label, .m-table .tbl-head .head-sec .m-label, .m-table-std .tbl-head .head-sec .m-label, .front-panel.head-front .head-sec .m-label, .tbl-head-like .head-sec .daterangepicker .btn, .daterangepicker .tbl-head-like .head-sec .btn, .m-table .tbl-head .head-sec .daterangepicker .btn, .daterangepicker .m-table .tbl-head .head-sec .btn, .m-table-std .tbl-head .head-sec .daterangepicker .btn, .daterangepicker .m-table-std .tbl-head .head-sec .btn, .front-panel.head-front .head-sec .daterangepicker .btn, .daterangepicker .front-panel.head-front .head-sec .btn {
      vertical-align: top;
      border: 1px solid #cccccc;
      border-radius: 100px;
      padding: 1px 10px;
      font-size: 13px; }
      .tbl-head-like .head-sec .m-btn:not(:first-child), .m-table .tbl-head .head-sec .m-btn:not(:first-child), .m-table-std .tbl-head .head-sec .m-btn:not(:first-child), .front-panel.head-front .head-sec .m-btn:not(:first-child), .tbl-head-like .head-sec .m-label:not(:first-child), .m-table .tbl-head .head-sec .m-label:not(:first-child), .m-table-std .tbl-head .head-sec .m-label:not(:first-child), .front-panel.head-front .head-sec .m-label:not(:first-child), .tbl-head-like .head-sec .daterangepicker .btn:not(:first-child), .daterangepicker .tbl-head-like .head-sec .btn:not(:first-child), .m-table .tbl-head .head-sec .daterangepicker .btn:not(:first-child), .daterangepicker .m-table .tbl-head .head-sec .btn:not(:first-child), .m-table-std .tbl-head .head-sec .daterangepicker .btn:not(:first-child), .daterangepicker .m-table-std .tbl-head .head-sec .btn:not(:first-child), .front-panel.head-front .head-sec .daterangepicker .btn:not(:first-child), .daterangepicker .front-panel.head-front .head-sec .btn:not(:first-child) {
        margin-left: 10px; }
      .tbl-head-like .head-sec .m-btn:hover, .m-table .tbl-head .head-sec .m-btn:hover, .m-table-std .tbl-head .head-sec .m-btn:hover, .front-panel.head-front .head-sec .m-btn:hover, .tbl-head-like .head-sec .m-label:hover, .m-table .tbl-head .head-sec .m-label:hover, .m-table-std .tbl-head .head-sec .m-label:hover, .front-panel.head-front .head-sec .m-label:hover, .tbl-head-like .head-sec .daterangepicker .btn:hover, .daterangepicker .tbl-head-like .head-sec .btn:hover, .m-table .tbl-head .head-sec .daterangepicker .btn:hover, .daterangepicker .m-table .tbl-head .head-sec .btn:hover, .m-table-std .tbl-head .head-sec .daterangepicker .btn:hover, .daterangepicker .m-table-std .tbl-head .head-sec .btn:hover, .front-panel.head-front .head-sec .daterangepicker .btn:hover, .daterangepicker .front-panel.head-front .head-sec .btn:hover {
        background: rgba(0, 0, 0, 0.07); }
  .tbl-head-like .head-tier, .m-table .tbl-head .head-tier, .m-table-std .tbl-head .head-tier, .front-panel.head-front .head-tier {
    padding: 0;
    border: 0;
    display: inline-block; }
    .tbl-head-like .head-tier .head-sec, .m-table .tbl-head .head-tier .head-sec, .m-table-std .tbl-head .head-tier .head-sec, .front-panel.head-front .head-tier .head-sec {
      height: 40px;
      border-right: 1px solid #816CD999; }
    .tbl-head-like .head-tier .head-tier, .m-table .tbl-head .head-tier .head-tier, .m-table-std .tbl-head .head-tier .head-tier, .front-panel.head-front .head-tier .head-tier {
      border-right: 0 !important; }
    .tbl-head-like .head-tier:last-child .wrap, .m-table .tbl-head .head-tier:last-child .wrap, .m-table-std .tbl-head .head-tier:last-child .wrap, .front-panel.head-front .head-tier:last-child .wrap {
      border-right: 0; }
    .tbl-head-like .head-tier:last-child .head-sec:last-child, .m-table .tbl-head .head-tier:last-child .head-sec:last-child, .m-table-std .tbl-head .head-tier:last-child .head-sec:last-child, .front-panel.head-front .head-tier:last-child .head-sec:last-child {
      border-right: 0; }
    .tbl-head-like .head-tier:not(:last-of-type) .wrap, .m-table .tbl-head .head-tier:not(:last-of-type) .wrap, .m-table-std .tbl-head .head-tier:not(:last-of-type) .wrap, .front-panel.head-front .head-tier:not(:last-of-type) .wrap {
      border-right: 1px solid #816CD999; }
    .tbl-head-like .head-tier:not(:last-of-type) .head-sec, .m-table .tbl-head .head-tier:not(:last-of-type) .head-sec, .m-table-std .tbl-head .head-tier:not(:last-of-type) .head-sec, .front-panel.head-front .head-tier:not(:last-of-type) .head-sec {
      border-right: 1px solid #816CD999; }
      .tbl-head-like .head-tier:not(:last-of-type) .head-sec:last-of-type, .m-table .tbl-head .head-tier:not(:last-of-type) .head-sec:last-of-type, .m-table-std .tbl-head .head-tier:not(:last-of-type) .head-sec:last-of-type, .front-panel.head-front .head-tier:not(:last-of-type) .head-sec:last-of-type {
        border-right: 1px solid #816CD999; }

.tbl-col-like, .m-table .tbl-body .tbl-col, .m-table-std .tbl-body .tbl-col, .wrapper-body .tbl-col {
  flex: 1;
  min-height: 38px;
  vertical-align: top;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.65);
  padding: 7px 8px;
  display: inline-block;
  border-right: 1px solid #e2f4fc;
  border-bottom: 1px solid #e2f4fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative; }
  .tbl-col-like.option, .m-table .tbl-body .option.tbl-col, .m-table-std .tbl-body .option.tbl-col, .wrapper-body .option.tbl-col {
    text-align: center; }
    .tbl-col-like.option .m-btn, .m-table .tbl-body .option.tbl-col .m-btn, .m-table-std .tbl-body .option.tbl-col .m-btn, .wrapper-body .option.tbl-col .m-btn, .tbl-col-like.option .m-label, .m-table .tbl-body .option.tbl-col .m-label, .m-table-std .tbl-body .option.tbl-col .m-label, .wrapper-body .option.tbl-col .m-label, .tbl-col-like.option .daterangepicker .btn, .daterangepicker .tbl-col-like.option .btn, .m-table .tbl-body .option.tbl-col .daterangepicker .btn, .daterangepicker .m-table .tbl-body .option.tbl-col .btn, .m-table-std .tbl-body .option.tbl-col .daterangepicker .btn, .daterangepicker .m-table-std .tbl-body .option.tbl-col .btn, .wrapper-body .option.tbl-col .daterangepicker .btn, .daterangepicker .wrapper-body .option.tbl-col .btn {
      margin: 0 1px; }
      .tbl-col-like.option .m-btn.icon, .m-table .tbl-body .option.tbl-col .m-btn.icon, .m-table-std .tbl-body .option.tbl-col .m-btn.icon, .wrapper-body .option.tbl-col .m-btn.icon, .tbl-col-like.option .icon.m-label, .m-table .tbl-body .option.tbl-col .icon.m-label, .m-table-std .tbl-body .option.tbl-col .icon.m-label, .wrapper-body .option.tbl-col .icon.m-label, .tbl-col-like.option .m-collapse .collapse-head .m-label.arrow, .m-collapse .collapse-head .tbl-col-like.option .m-label.arrow, .m-table .tbl-body .option.tbl-col .m-collapse .collapse-head .m-label.arrow, .m-collapse .collapse-head .m-table .tbl-body .option.tbl-col .m-label.arrow, .m-table-std .tbl-body .option.tbl-col .m-collapse .collapse-head .m-label.arrow, .m-collapse .collapse-head .m-table-std .tbl-body .option.tbl-col .m-label.arrow, .wrapper-body .option.tbl-col .m-collapse .collapse-head .m-label.arrow, .m-collapse .collapse-head .wrapper-body .option.tbl-col .m-label.arrow, .tbl-col-like.option .m-collapse .sub-head .m-label.arrow, .m-collapse .sub-head .tbl-col-like.option .m-label.arrow, .m-table .tbl-body .option.tbl-col .m-collapse .sub-head .m-label.arrow, .m-collapse .sub-head .m-table .tbl-body .option.tbl-col .m-label.arrow, .m-table-std .tbl-body .option.tbl-col .m-collapse .sub-head .m-label.arrow, .m-collapse .sub-head .m-table-std .tbl-body .option.tbl-col .m-label.arrow, .wrapper-body .option.tbl-col .m-collapse .sub-head .m-label.arrow, .m-collapse .sub-head .wrapper-body .option.tbl-col .m-label.arrow, .tbl-col-like.option .daterangepicker .icon.btn, .daterangepicker .tbl-col-like.option .icon.btn, .m-table .tbl-body .option.tbl-col .daterangepicker .icon.btn, .daterangepicker .m-table .tbl-body .option.tbl-col .icon.btn, .m-table-std .tbl-body .option.tbl-col .daterangepicker .icon.btn, .daterangepicker .m-table-std .tbl-body .option.tbl-col .icon.btn, .wrapper-body .option.tbl-col .daterangepicker .icon.btn, .daterangepicker .wrapper-body .option.tbl-col .icon.btn, .tbl-col-like.option .daterangepicker .m-collapse .collapse-head .btn.arrow, .daterangepicker .m-collapse .collapse-head .tbl-col-like.option .btn.arrow, .m-table .tbl-body .option.tbl-col .daterangepicker .m-collapse .collapse-head .btn.arrow, .daterangepicker .m-collapse .collapse-head .m-table .tbl-body .option.tbl-col .btn.arrow, .m-table-std .tbl-body .option.tbl-col .daterangepicker .m-collapse .collapse-head .btn.arrow, .daterangepicker .m-collapse .collapse-head .m-table-std .tbl-body .option.tbl-col .btn.arrow, .wrapper-body .option.tbl-col .daterangepicker .m-collapse .collapse-head .btn.arrow, .daterangepicker .m-collapse .collapse-head .wrapper-body .option.tbl-col .btn.arrow, .tbl-col-like.option .m-collapse .collapse-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .daterangepicker .tbl-col-like.option .btn.arrow, .m-table .tbl-body .option.tbl-col .m-collapse .collapse-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .daterangepicker .m-table .tbl-body .option.tbl-col .btn.arrow, .m-table-std .tbl-body .option.tbl-col .m-collapse .collapse-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .daterangepicker .m-table-std .tbl-body .option.tbl-col .btn.arrow, .wrapper-body .option.tbl-col .m-collapse .collapse-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .daterangepicker .wrapper-body .option.tbl-col .btn.arrow, .tbl-col-like.option .daterangepicker .m-collapse .sub-head .btn.arrow, .daterangepicker .m-collapse .sub-head .tbl-col-like.option .btn.arrow, .m-table .tbl-body .option.tbl-col .daterangepicker .m-collapse .sub-head .btn.arrow, .daterangepicker .m-collapse .sub-head .m-table .tbl-body .option.tbl-col .btn.arrow, .m-table-std .tbl-body .option.tbl-col .daterangepicker .m-collapse .sub-head .btn.arrow, .daterangepicker .m-collapse .sub-head .m-table-std .tbl-body .option.tbl-col .btn.arrow, .wrapper-body .option.tbl-col .daterangepicker .m-collapse .sub-head .btn.arrow, .daterangepicker .m-collapse .sub-head .wrapper-body .option.tbl-col .btn.arrow, .tbl-col-like.option .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .sub-head .daterangepicker .tbl-col-like.option .btn.arrow, .m-table .tbl-body .option.tbl-col .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .sub-head .daterangepicker .m-table .tbl-body .option.tbl-col .btn.arrow, .m-table-std .tbl-body .option.tbl-col .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .sub-head .daterangepicker .m-table-std .tbl-body .option.tbl-col .btn.arrow, .wrapper-body .option.tbl-col .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .sub-head .daterangepicker .wrapper-body .option.tbl-col .btn.arrow, .tbl-col-like.option .m-collapse .collapse-head .m-btn.arrow, .m-collapse .collapse-head .tbl-col-like.option .m-btn.arrow, .m-table .tbl-body .option.tbl-col .m-collapse .collapse-head .m-btn.arrow, .m-collapse .collapse-head .m-table .tbl-body .option.tbl-col .m-btn.arrow, .m-table-std .tbl-body .option.tbl-col .m-collapse .collapse-head .m-btn.arrow, .m-collapse .collapse-head .m-table-std .tbl-body .option.tbl-col .m-btn.arrow, .wrapper-body .option.tbl-col .m-collapse .collapse-head .m-btn.arrow, .m-collapse .collapse-head .wrapper-body .option.tbl-col .m-btn.arrow, .tbl-col-like.option .m-collapse .sub-head .m-btn.arrow, .m-collapse .sub-head .tbl-col-like.option .m-btn.arrow, .m-table .tbl-body .option.tbl-col .m-collapse .sub-head .m-btn.arrow, .m-collapse .sub-head .m-table .tbl-body .option.tbl-col .m-btn.arrow, .m-table-std .tbl-body .option.tbl-col .m-collapse .sub-head .m-btn.arrow, .m-collapse .sub-head .m-table-std .tbl-body .option.tbl-col .m-btn.arrow, .wrapper-body .option.tbl-col .m-collapse .sub-head .m-btn.arrow, .m-collapse .sub-head .wrapper-body .option.tbl-col .m-btn.arrow {
        margin: 0 5px; }
  .tbl-col-like:last-child, .m-table .tbl-body .tbl-col:last-child, .m-table-std .tbl-body .tbl-col:last-child, .wrapper-body .tbl-col:last-child {
    border-right: 0; }
  .tbl-col-like:hover .adjuster, .m-table .tbl-body .tbl-col:hover .adjuster, .m-table-std .tbl-body .tbl-col:hover .adjuster, .wrapper-body .tbl-col:hover .adjuster {
    opacity: 1; }
  .tbl-col-like input, .m-table .tbl-body .tbl-col input, .m-table-std .tbl-body .tbl-col input, .wrapper-body .tbl-col input, .tbl-col-like select, .m-table .tbl-body .tbl-col select, .m-table-std .tbl-body .tbl-col select, .wrapper-body .tbl-col select, .tbl-col-like textarea, .m-table .tbl-body .tbl-col textarea, .m-table-std .tbl-body .tbl-col textarea, .wrapper-body .tbl-col textarea, .tbl-col-like .date-picker-btn, .m-table .tbl-body .tbl-col .date-picker-btn, .m-table-std .tbl-body .tbl-col .date-picker-btn, .wrapper-body .tbl-col .date-picker-btn, .tbl-col-like .time-picker, .m-table .tbl-body .tbl-col .time-picker, .m-table-std .tbl-body .tbl-col .time-picker, .wrapper-body .tbl-col .time-picker, .tbl-col-like .sel-btns-wrapper, .m-table .tbl-body .tbl-col .sel-btns-wrapper, .m-table-std .tbl-body .tbl-col .sel-btns-wrapper, .wrapper-body .tbl-col .sel-btns-wrapper, .tbl-col-like .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-col-like .sel-btn, .m-table .tbl-body .tbl-col .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .m-table .tbl-body .tbl-col .sel-btn, .m-table-std .tbl-body .tbl-col .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .m-table-std .tbl-body .tbl-col .sel-btn, .wrapper-body .tbl-col .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .wrapper-body .tbl-col .sel-btn, .tbl-col-like .m-switch, .m-table .tbl-body .tbl-col .m-switch, .m-table-std .tbl-body .tbl-col .m-switch, .wrapper-body .tbl-col .m-switch, .tbl-col-like .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-col-like .m-tree-node-name, .m-table .tbl-body .tbl-col .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .m-table .tbl-body .tbl-col .m-tree-node-name, .m-table-std .tbl-body .tbl-col .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .m-table-std .tbl-body .tbl-col .m-tree-node-name, .wrapper-body .tbl-col .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .wrapper-body .tbl-col .m-tree-node-name, .tbl-col-like .m-tag-wrapper, .m-table .tbl-body .tbl-col .m-tag-wrapper, .m-table-std .tbl-body .tbl-col .m-tag-wrapper, .wrapper-body .tbl-col .m-tag-wrapper, .tbl-col-like .condition-selector, .m-table .tbl-body .tbl-col .condition-selector, .m-table-std .tbl-body .tbl-col .condition-selector, .wrapper-body .tbl-col .condition-selector {
    width: 100%;
    height: 23px;
    padding: 1px 12px; }
  .tbl-col-like select, .m-table .tbl-body .tbl-col select, .m-table-std .tbl-body .tbl-col select, .wrapper-body .tbl-col select {
    display: block; }
  .tbl-col-like .m-tag-wrapper, .m-table .tbl-body .tbl-col .m-tag-wrapper, .m-table-std .tbl-body .tbl-col .m-tag-wrapper, .wrapper-body .tbl-col .m-tag-wrapper {
    height: auto; }
  .tbl-col-like .col-layer, .m-table .tbl-body .tbl-col .col-layer, .m-table-std .tbl-body .tbl-col .col-layer, .wrapper-body .tbl-col .col-layer {
    width: 100%; }
    .tbl-col-like .col-layer:not(:first-child), .m-table .tbl-body .tbl-col .col-layer:not(:first-child), .m-table-std .tbl-body .tbl-col .col-layer:not(:first-child), .wrapper-body .tbl-col .col-layer:not(:first-child) {
      margin-top: 5px; }
  .tbl-col-like .m-switch, .m-table .tbl-body .tbl-col .m-switch, .m-table-std .tbl-body .tbl-col .m-switch, .wrapper-body .tbl-col .m-switch {
    padding: 0; }
    .tbl-col-like .m-switch .options-wrapper .opt, .m-table .tbl-body .tbl-col .m-switch .options-wrapper .opt, .m-table-std .tbl-body .tbl-col .m-switch .options-wrapper .opt, .wrapper-body .tbl-col .m-switch .options-wrapper .opt {
      padding: 1px 0px; }
  .tbl-col-like .sel-btns-wrapper, .m-table .tbl-body .tbl-col .sel-btns-wrapper, .m-table-std .tbl-body .tbl-col .sel-btns-wrapper, .wrapper-body .tbl-col .sel-btns-wrapper {
    padding: 0; }
  .tbl-col-like .plain-text, .m-table .tbl-body .tbl-col .plain-text, .m-table-std .tbl-body .tbl-col .plain-text, .wrapper-body .tbl-col .plain-text {
    width: 100%;
    white-space: inherit;
    overflow: inherit;
    text-overflow: inherit;
    vertical-align: middle; }
  .tbl-col-like .adjuster, .m-table .tbl-body .tbl-col .adjuster, .m-table-std .tbl-body .tbl-col .adjuster, .wrapper-body .tbl-col .adjuster {
    height: 100%;
    position: absolute;
    top: 0;
    right: 15px;
    opacity: 0;
    text-align: center; }
    .tbl-col-like .adjuster i, .m-table .tbl-body .tbl-col .adjuster i, .m-table-std .tbl-body .tbl-col .adjuster i, .wrapper-body .tbl-col .adjuster i {
      height: 50%;
      display: block;
      color: #F8FCFF;
      padding: 0px;
      padding-bottom: 0;
      font-size: 20px;
      opacity: .6;
      cursor: pointer; }
      .tbl-col-like .adjuster i:hover, .m-table .tbl-body .tbl-col .adjuster i:hover, .m-table-std .tbl-body .tbl-col .adjuster i:hover, .wrapper-body .tbl-col .adjuster i:hover {
        color: #d9d9ff; }

.tbl-wrapper:not(:last-child) {
  margin-bottom: 20px; }

.tbl-wrapper.adjusting .tbl-col {
  background: rgba(0, 0, 0, 0.03); }
  .tbl-wrapper.adjusting .tbl-col.adjustable {
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 8px rgba(0, 0, 0, 0.04);
    position: relative; }

.tbl-wrapper .tbl-title, .tbl-wrapper .max {
  color: rgba(0, 0, 0, 0.45);
  line-height: 32px;
  font-size: 16px;
  font-weight: bold;
  display: inline-block; }
  .tbl-wrapper .tbl-title:not(:only-child), .tbl-wrapper .max:not(:only-child) {
    margin-right: 10px; }

.tbl-wrapper .max::after {
  margin-left: 10px;
  color: inherit; }

.m-table, .m-table-std {
  width: 100%;
  white-space: nowrap;
  overflow: auto;
  border: 1px solid #816CD999;
  background: #ffffff;
  box-sizing: border-box; }
  .m-table .head-shell, .m-table-std .head-shell {
    position: sticky;
    top: 0;
    z-index: 1; }
  .m-table .body-shell, .m-table-std .body-shell, .m-table .head-shell, .m-table .m-table-std .head-shell, .m-table-std .m-table .head-shell, .m-table-std .head-shell {
    display: flex; }
  .m-table .tbl-head, .m-table-std .tbl-head {
    width: 100%;
    padding: 0; }
  .m-table .tbl-body, .m-table-std .tbl-body {
    width: 100%;
    max-height: calc(100vh - 273px);
    border-top-width: 0; }
    .m-table .tbl-body .tbl-row-group, .m-table-std .tbl-body .tbl-row-group {
      display: flex; }
      .m-table .tbl-body .tbl-row-group:not(:last-child), .m-table-std .tbl-body .tbl-row-group:not(:last-child) {
        border-bottom: 1px solid #816CD999; }
      .m-table .tbl-body .tbl-row-group .group-head, .m-table-std .tbl-body .tbl-row-group .group-head {
        padding: 7px 8px;
        box-sizing: border-box;
        border-right: 1px solid #e2f4fc; }
      .m-table .tbl-body .tbl-row-group .group-body, .m-table-std .tbl-body .tbl-row-group .group-body {
        flex-grow: 1; }
    .m-table .tbl-body .tbl-row, .m-table-std .tbl-body .tbl-row {
      min-width: 100%;
      user-select: none;
      padding: 0;
      margin: 0;
      display: flex; }
      .m-table .tbl-body .tbl-row:hover .tbl-col, .m-table-std .tbl-body .tbl-row:hover .tbl-col {
        background: #f2f2ff; }
      .m-table .tbl-body .tbl-row:last-child .tbl-col, .m-table-std .tbl-body .tbl-row:last-child .tbl-col {
        border-bottom: 0; }
      .m-table .tbl-body .tbl-row.selected .front-panel, .m-table-std .tbl-body .tbl-row.selected .front-panel {
        border-color: #a2ccf5; }
      .m-table .tbl-body .tbl-row.selected .tbl-col, .m-table-std .tbl-body .tbl-row.selected .tbl-col {
        color: rgba(0, 0, 0, 0.65);
        background: #a2ccf5;
        border-color: transparent; }
      .m-table .tbl-body .tbl-row.selected .m-btn, .m-table-std .tbl-body .tbl-row.selected .m-btn, .m-table .tbl-body .tbl-row.selected .m-label, .m-table-std .tbl-body .tbl-row.selected .m-label, .m-table .tbl-body .tbl-row.selected .daterangepicker .btn, .daterangepicker .m-table .tbl-body .tbl-row.selected .btn, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .btn, .daterangepicker .m-table-std .tbl-body .tbl-row.selected .btn {
        box-shadow: 1px 0 0 white, -1px 0 0 white, 0 1px 0 white, 0 -1px 0 white; }
        .m-table .tbl-body .tbl-row.selected .m-btn.icon, .m-table-std .tbl-body .tbl-row.selected .m-btn.icon, .m-table .tbl-body .tbl-row.selected .icon.m-label, .m-table-std .tbl-body .tbl-row.selected .icon.m-label, .m-table .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-label.arrow, .m-collapse .collapse-head .m-table .tbl-body .tbl-row.selected .m-label.arrow, .m-table-std .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-label.arrow, .m-collapse .collapse-head .m-table-std .tbl-body .tbl-row.selected .m-label.arrow, .m-table .tbl-body .tbl-row.selected .m-collapse .sub-head .m-label.arrow, .m-collapse .sub-head .m-table .tbl-body .tbl-row.selected .m-label.arrow, .m-table-std .tbl-body .tbl-row.selected .m-collapse .sub-head .m-label.arrow, .m-collapse .sub-head .m-table-std .tbl-body .tbl-row.selected .m-label.arrow, .m-table .tbl-body .tbl-row.selected .daterangepicker .icon.btn, .daterangepicker .m-table .tbl-body .tbl-row.selected .icon.btn, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .icon.btn, .daterangepicker .m-table-std .tbl-body .tbl-row.selected .icon.btn, .m-table .tbl-body .tbl-row.selected .daterangepicker .m-collapse .collapse-head .btn.arrow, .daterangepicker .m-collapse .collapse-head .m-table .tbl-body .tbl-row.selected .btn.arrow, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .m-collapse .collapse-head .btn.arrow, .daterangepicker .m-collapse .collapse-head .m-table-std .tbl-body .tbl-row.selected .btn.arrow, .m-table .tbl-body .tbl-row.selected .m-collapse .collapse-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .daterangepicker .m-table .tbl-body .tbl-row.selected .btn.arrow, .m-table-std .tbl-body .tbl-row.selected .m-collapse .collapse-head .daterangepicker .btn.arrow, .m-collapse .collapse-head .daterangepicker .m-table-std .tbl-body .tbl-row.selected .btn.arrow, .m-table .tbl-body .tbl-row.selected .daterangepicker .m-collapse .sub-head .btn.arrow, .daterangepicker .m-collapse .sub-head .m-table .tbl-body .tbl-row.selected .btn.arrow, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .m-collapse .sub-head .btn.arrow, .daterangepicker .m-collapse .sub-head .m-table-std .tbl-body .tbl-row.selected .btn.arrow, .m-table .tbl-body .tbl-row.selected .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .sub-head .daterangepicker .m-table .tbl-body .tbl-row.selected .btn.arrow, .m-table-std .tbl-body .tbl-row.selected .m-collapse .sub-head .daterangepicker .btn.arrow, .m-collapse .sub-head .daterangepicker .m-table-std .tbl-body .tbl-row.selected .btn.arrow, .m-table .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-btn.arrow, .m-collapse .collapse-head .m-table .tbl-body .tbl-row.selected .m-btn.arrow, .m-table-std .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-btn.arrow, .m-collapse .collapse-head .m-table-std .tbl-body .tbl-row.selected .m-btn.arrow, .m-table .tbl-body .tbl-row.selected .m-collapse .sub-head .m-btn.arrow, .m-collapse .sub-head .m-table .tbl-body .tbl-row.selected .m-btn.arrow, .m-table-std .tbl-body .tbl-row.selected .m-collapse .sub-head .m-btn.arrow, .m-collapse .sub-head .m-table-std .tbl-body .tbl-row.selected .m-btn.arrow {
          box-shadow: none; }
          .m-table .tbl-body .tbl-row.selected .m-btn.icon img, .m-table-std .tbl-body .tbl-row.selected .m-btn.icon img, .m-table .tbl-body .tbl-row.selected .icon.m-label img, .m-table-std .tbl-body .tbl-row.selected .icon.m-label img, .m-table .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-label.arrow img, .m-collapse .collapse-head .m-table .tbl-body .tbl-row.selected .m-label.arrow img, .m-table-std .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-label.arrow img, .m-collapse .collapse-head .m-table-std .tbl-body .tbl-row.selected .m-label.arrow img, .m-table .tbl-body .tbl-row.selected .m-collapse .sub-head .m-label.arrow img, .m-collapse .sub-head .m-table .tbl-body .tbl-row.selected .m-label.arrow img, .m-table-std .tbl-body .tbl-row.selected .m-collapse .sub-head .m-label.arrow img, .m-collapse .sub-head .m-table-std .tbl-body .tbl-row.selected .m-label.arrow img, .m-table .tbl-body .tbl-row.selected .daterangepicker .icon.btn img, .daterangepicker .m-table .tbl-body .tbl-row.selected .icon.btn img, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .icon.btn img, .daterangepicker .m-table-std .tbl-body .tbl-row.selected .icon.btn img, .m-table .tbl-body .tbl-row.selected .daterangepicker .m-collapse .collapse-head .btn.arrow img, .daterangepicker .m-collapse .collapse-head .m-table .tbl-body .tbl-row.selected .btn.arrow img, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .m-collapse .collapse-head .btn.arrow img, .daterangepicker .m-collapse .collapse-head .m-table-std .tbl-body .tbl-row.selected .btn.arrow img, .m-table .tbl-body .tbl-row.selected .m-collapse .collapse-head .daterangepicker .btn.arrow img, .m-collapse .collapse-head .daterangepicker .m-table .tbl-body .tbl-row.selected .btn.arrow img, .m-table-std .tbl-body .tbl-row.selected .m-collapse .collapse-head .daterangepicker .btn.arrow img, .m-collapse .collapse-head .daterangepicker .m-table-std .tbl-body .tbl-row.selected .btn.arrow img, .m-table .tbl-body .tbl-row.selected .daterangepicker .m-collapse .sub-head .btn.arrow img, .daterangepicker .m-collapse .sub-head .m-table .tbl-body .tbl-row.selected .btn.arrow img, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .m-collapse .sub-head .btn.arrow img, .daterangepicker .m-collapse .sub-head .m-table-std .tbl-body .tbl-row.selected .btn.arrow img, .m-table .tbl-body .tbl-row.selected .m-collapse .sub-head .daterangepicker .btn.arrow img, .m-collapse .sub-head .daterangepicker .m-table .tbl-body .tbl-row.selected .btn.arrow img, .m-table-std .tbl-body .tbl-row.selected .m-collapse .sub-head .daterangepicker .btn.arrow img, .m-collapse .sub-head .daterangepicker .m-table-std .tbl-body .tbl-row.selected .btn.arrow img, .m-table .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-btn.arrow img, .m-collapse .collapse-head .m-table .tbl-body .tbl-row.selected .m-btn.arrow img, .m-table-std .tbl-body .tbl-row.selected .m-collapse .collapse-head .m-btn.arrow img, .m-collapse .collapse-head .m-table-std .tbl-body .tbl-row.selected .m-btn.arrow img, .m-table .tbl-body .tbl-row.selected .m-collapse .sub-head .m-btn.arrow img, .m-collapse .sub-head .m-table .tbl-body .tbl-row.selected .m-btn.arrow img, .m-table-std .tbl-body .tbl-row.selected .m-collapse .sub-head .m-btn.arrow img, .m-collapse .sub-head .m-table-std .tbl-body .tbl-row.selected .m-btn.arrow img {
            filter: brightness(1000); }
        .m-table .tbl-body .tbl-row.selected .m-btn.text, .m-table-std .tbl-body .tbl-row.selected .m-btn.text, .m-table .tbl-body .tbl-row.selected .text.m-label, .m-table-std .tbl-body .tbl-row.selected .text.m-label, .m-table .tbl-body .tbl-row.selected .daterangepicker .text.btn, .daterangepicker .m-table .tbl-body .tbl-row.selected .text.btn, .m-table-std .tbl-body .tbl-row.selected .daterangepicker .text.btn, .daterangepicker .m-table-std .tbl-body .tbl-row.selected .text.btn {
          box-shadow: none; }
      .m-table .tbl-body .tbl-row.allow-copy, .m-table-std .tbl-body .tbl-row.allow-copy {
        user-select: auto; }
      .m-table .tbl-body .tbl-row .stack-bar, .m-table-std .tbl-body .tbl-row .stack-bar {
        border: 1px solid #ffffff;
        box-sizing: border-box;
        line-height: 21px; }
    .m-table .tbl-body .front-panel, .m-table-std .tbl-body .front-panel {
      display: flex;
      border-right: 1px solid #eaeaea;
      box-sizing: border-box; }
      .m-table .tbl-body .front-panel .tbl-col, .m-table-std .tbl-body .front-panel .tbl-col {
        width: 34px;
        justify-content: space-around;
        border-right: 0; }
        .m-table .tbl-body .front-panel .tbl-col i, .m-table-std .tbl-body .front-panel .tbl-col i {
          font-size: 16px;
          cursor: pointer; }
    .m-table .tbl-body .column-wrapper, .m-table-std .tbl-body .column-wrapper {
      width: 100%;
      display: flex; }
    .m-table .tbl-body .tbl-col, .m-table-std .tbl-body .tbl-col {
      display: flex;
      flex-wrap: nowrap;
      flex: auto 1 0;
      align-content: center;
      align-items: center; }
      .m-table .tbl-body .tbl-col.multi-layer, .m-table-std .tbl-body .tbl-col.multi-layer {
        flex-wrap: wrap; }
      .m-table .tbl-body .tbl-col.option, .m-table-std .tbl-body .tbl-col.option {
        justify-content: space-around; }
      .m-table .tbl-body .tbl-col .m-btn.text, .m-table-std .tbl-body .tbl-col .m-btn.text, .m-table .tbl-body .tbl-col .text.m-label, .m-table-std .tbl-body .tbl-col .text.m-label, .m-table .tbl-body .tbl-col .daterangepicker .text.btn, .daterangepicker .m-table .tbl-body .tbl-col .text.btn, .m-table-std .tbl-body .tbl-col .daterangepicker .text.btn, .daterangepicker .m-table-std .tbl-body .tbl-col .text.btn {
        margin: 0 5px; }
      .m-table .tbl-body .tbl-col .m-btn:first-child, .m-table-std .tbl-body .tbl-col .m-btn:first-child, .m-table .tbl-body .tbl-col .m-label:first-child, .m-table-std .tbl-body .tbl-col .m-label:first-child, .m-table .tbl-body .tbl-col .daterangepicker .btn:first-child, .daterangepicker .m-table .tbl-body .tbl-col .btn:first-child, .m-table-std .tbl-body .tbl-col .daterangepicker .btn:first-child, .daterangepicker .m-table-std .tbl-body .tbl-col .btn:first-child {
        margin-left: 0; }
      .m-table .tbl-body .tbl-col .m-btn:last-child, .m-table-std .tbl-body .tbl-col .m-btn:last-child, .m-table .tbl-body .tbl-col .m-label:last-child, .m-table-std .tbl-body .tbl-col .m-label:last-child, .m-table .tbl-body .tbl-col .daterangepicker .btn:last-child, .daterangepicker .m-table .tbl-body .tbl-col .btn:last-child, .m-table-std .tbl-body .tbl-col .daterangepicker .btn:last-child, .daterangepicker .m-table-std .tbl-body .tbl-col .btn:last-child {
        margin-right: 0; }

.m-table-std {
  white-space: wrap;
  display: table;
  border-spacing: unset; }
  .m-table-std .tbl-body {
    display: table;
    width: 100%; }

.tbl-upper-panel, .tbl-lower-panel {
  min-height: 32px;
  padding-bottom: 10px;
  overflow: visible;
  color: rgba(0, 0, 0, 0.45); }
  .tbl-upper-panel .paging-container, .tbl-lower-panel .paging-container {
    display: inline-block;
    user-select: none;
    margin-right: 10px; }
    .tbl-upper-panel .paging-container .btns, .tbl-lower-panel .paging-container .btns {
      border: 1px solid #816CD999;
      border-radius: 3px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px; }
      .tbl-upper-panel .paging-container .btns .page-btn, .tbl-lower-panel .paging-container .btns .page-btn {
        width: 32px;
        height: 32px;
        line-height: 32px;
        display: inline-block;
        color: #816CD9;
        border-right: 1px solid #816CD999;
        text-align: center;
        cursor: pointer; }
        .tbl-upper-panel .paging-container .btns .page-btn.current, .tbl-lower-panel .paging-container .btns .page-btn.current {
          background: #f2f2ff;
          cursor: default; }
          .tbl-upper-panel .paging-container .btns .page-btn.current:hover, .tbl-lower-panel .paging-container .btns .page-btn.current:hover {
            background: #f2f2ff; }
        .tbl-upper-panel .paging-container .btns .page-btn.disabled i, .tbl-lower-panel .paging-container .btns .page-btn.disabled i {
          color: rgba(0, 0, 0, 0.1); }
        .tbl-upper-panel .paging-container .btns .page-btn.disabled:hover, .tbl-lower-panel .paging-container .btns .page-btn.disabled:hover {
          cursor: default;
          background: transparent; }
        .tbl-upper-panel .paging-container .btns .page-btn:hover, .tbl-lower-panel .paging-container .btns .page-btn:hover {
          background: rgba(0, 0, 0, 0.03); }
        .tbl-upper-panel .paging-container .btns .page-btn:last-child, .tbl-lower-panel .paging-container .btns .page-btn:last-child {
          border-right: 0; }
    .tbl-upper-panel .paging-container input, .tbl-lower-panel .paging-container input, .tbl-upper-panel .paging-container select, .tbl-lower-panel .paging-container select, .tbl-upper-panel .paging-container textarea, .tbl-lower-panel .paging-container textarea, .tbl-upper-panel .paging-container .date-picker-btn, .tbl-lower-panel .paging-container .date-picker-btn, .tbl-upper-panel .paging-container .time-picker, .tbl-lower-panel .paging-container .time-picker, .tbl-upper-panel .paging-container .sel-btns-wrapper, .tbl-lower-panel .paging-container .sel-btns-wrapper, .tbl-upper-panel .paging-container .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-upper-panel .paging-container .sel-btn, .tbl-lower-panel .paging-container .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-lower-panel .paging-container .sel-btn, .tbl-upper-panel .paging-container .m-switch, .tbl-lower-panel .paging-container .m-switch, .tbl-upper-panel .paging-container .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-upper-panel .paging-container .m-tree-node-name, .tbl-lower-panel .paging-container .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-lower-panel .paging-container .m-tree-node-name, .tbl-upper-panel .paging-container .m-tag-wrapper, .tbl-lower-panel .paging-container .m-tag-wrapper, .tbl-upper-panel .paging-container .condition-selector, .tbl-lower-panel .paging-container .condition-selector {
      width: 60px !important;
      vertical-align: middle;
      margin-right: 10px; }
    .tbl-upper-panel .paging-container .select-per, .tbl-lower-panel .paging-container .select-per {
      width: auto !important; }
    .tbl-upper-panel .paging-container .max, .tbl-lower-panel .paging-container .max {
      font-weight: bold; }
  .tbl-upper-panel .options-container, .tbl-lower-panel .options-container {
    display: inline-block; }
    .tbl-upper-panel .options-container.lefty, .tbl-lower-panel .options-container.lefty {
      float: left; }
      .tbl-upper-panel .options-container.lefty .m-btn, .tbl-lower-panel .options-container.lefty .m-btn, .tbl-upper-panel .options-container.lefty .m-label, .tbl-lower-panel .options-container.lefty .m-label, .tbl-upper-panel .options-container.lefty .daterangepicker .btn, .daterangepicker .tbl-upper-panel .options-container.lefty .btn, .tbl-lower-panel .options-container.lefty .daterangepicker .btn, .daterangepicker .tbl-lower-panel .options-container.lefty .btn {
        margin-left: 0;
        margin-right: 10px; }
      .tbl-upper-panel .options-container.lefty input, .tbl-lower-panel .options-container.lefty input, .tbl-upper-panel .options-container.lefty select, .tbl-lower-panel .options-container.lefty select, .tbl-upper-panel .options-container.lefty textarea, .tbl-lower-panel .options-container.lefty textarea, .tbl-upper-panel .options-container.lefty .date-picker-btn, .tbl-lower-panel .options-container.lefty .date-picker-btn, .tbl-upper-panel .options-container.lefty .time-picker, .tbl-lower-panel .options-container.lefty .time-picker, .tbl-upper-panel .options-container.lefty .sel-btns-wrapper, .tbl-lower-panel .options-container.lefty .sel-btns-wrapper, .tbl-upper-panel .options-container.lefty .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-upper-panel .options-container.lefty .sel-btn, .tbl-lower-panel .options-container.lefty .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-lower-panel .options-container.lefty .sel-btn, .tbl-upper-panel .options-container.lefty .m-switch, .tbl-lower-panel .options-container.lefty .m-switch, .tbl-upper-panel .options-container.lefty .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-upper-panel .options-container.lefty .m-tree-node-name, .tbl-lower-panel .options-container.lefty .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-lower-panel .options-container.lefty .m-tree-node-name, .tbl-upper-panel .options-container.lefty .m-tag-wrapper, .tbl-lower-panel .options-container.lefty .m-tag-wrapper, .tbl-upper-panel .options-container.lefty .condition-selector, .tbl-lower-panel .options-container.lefty .condition-selector {
        margin-left: 0;
        margin-right: 10px; }
    .tbl-upper-panel .options-container .m-btn:not(:first-child), .tbl-lower-panel .options-container .m-btn:not(:first-child), .tbl-upper-panel .options-container .m-label:not(:first-child), .tbl-lower-panel .options-container .m-label:not(:first-child), .tbl-upper-panel .options-container .daterangepicker .btn:not(:first-child), .daterangepicker .tbl-upper-panel .options-container .btn:not(:first-child), .tbl-lower-panel .options-container .daterangepicker .btn:not(:first-child), .daterangepicker .tbl-lower-panel .options-container .btn:not(:first-child) {
      margin-left: 10px; }
    .tbl-upper-panel .options-container input, .tbl-lower-panel .options-container input, .tbl-upper-panel .options-container select, .tbl-lower-panel .options-container select, .tbl-upper-panel .options-container textarea, .tbl-lower-panel .options-container textarea, .tbl-upper-panel .options-container .date-picker-btn, .tbl-lower-panel .options-container .date-picker-btn, .tbl-upper-panel .options-container .time-picker, .tbl-lower-panel .options-container .time-picker, .tbl-upper-panel .options-container .sel-btns-wrapper, .tbl-lower-panel .options-container .sel-btns-wrapper, .tbl-upper-panel .options-container .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-upper-panel .options-container .sel-btn, .tbl-lower-panel .options-container .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .tbl-lower-panel .options-container .sel-btn, .tbl-upper-panel .options-container .m-switch, .tbl-lower-panel .options-container .m-switch, .tbl-upper-panel .options-container .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-upper-panel .options-container .m-tree-node-name, .tbl-lower-panel .options-container .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .tbl-lower-panel .options-container .m-tree-node-name, .tbl-upper-panel .options-container .m-tag-wrapper, .tbl-lower-panel .options-container .m-tag-wrapper, .tbl-upper-panel .options-container .condition-selector, .tbl-lower-panel .options-container .condition-selector {
      margin-left: 10px; }
  .tbl-upper-panel .column-selector-container, .tbl-lower-panel .column-selector-container {
    float: right;
    position: relative;
    overflow: visible; }
    .tbl-upper-panel .column-selector-container .m-btn, .tbl-lower-panel .column-selector-container .m-btn, .tbl-upper-panel .column-selector-container .m-label, .tbl-lower-panel .column-selector-container .m-label, .tbl-upper-panel .column-selector-container .daterangepicker .btn, .daterangepicker .tbl-upper-panel .column-selector-container .btn, .tbl-lower-panel .column-selector-container .daterangepicker .btn, .daterangepicker .tbl-lower-panel .column-selector-container .btn {
      margin-left: 10px; }
    .tbl-upper-panel .column-selector-container .column-selector-panel, .tbl-lower-panel .column-selector-container .column-selector-panel {
      width: 50vw;
      background: #ffffff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 15px rgba(0, 0, 0, 0.15);
      border-radius: 8px;
      position: absolute;
      right: 0;
      top: calc(100% + 5px);
      z-index: 1;
      padding: 30px;
      box-sizing: border-box; }
      .tbl-upper-panel .column-selector-container .column-selector-panel:after, .tbl-lower-panel .column-selector-container .column-selector-panel:after {
        content: '';
        width: 0px;
        height: 0px;
        border-width: 5px 8px;
        border-color: #ffffff;
        display: block;
        position: absolute; }
      .tbl-upper-panel .column-selector-container .column-selector-panel .column-option, .tbl-lower-panel .column-selector-container .column-selector-panel .column-option {
        width: calc(100% / 4);
        display: inline-block;
        padding: 5px 10px;
        box-sizing: border-box;
        cursor: default; }
        .tbl-upper-panel .column-selector-container .column-selector-panel .column-option:not(.fixed), .tbl-lower-panel .column-selector-container .column-selector-panel .column-option:not(.fixed) {
          cursor: pointer; }
          .tbl-upper-panel .column-selector-container .column-selector-panel .column-option:not(.fixed):hover, .tbl-lower-panel .column-selector-container .column-selector-panel .column-option:not(.fixed):hover {
            background: #edf2ff; }
  .tbl-upper-panel .filter-container, .tbl-lower-panel .filter-container {
    display: inline-block;
    margin-right: 10px; }
    .tbl-upper-panel .filter-container select:not(:first-child), .tbl-lower-panel .filter-container select:not(:first-child) {
      margin-left: 10px; }

.tbl-lower-panel {
  text-align: right;
  margin-top: 5px; }

.front-panel.head-front {
  display: inline-block;
  border-right: 1px solid #816CD999; }
  .front-panel.head-front .checkbox-head, .front-panel.head-front .star-head {
    display: inline-block; }
  .front-panel.head-front .head-sec {
    width: 34px;
    text-align: center;
    border-right: 0; }
    .front-panel.head-front .head-sec i {
      cursor: pointer;
      font-size: 16px; }

.wrapper-body {
  vertical-align: top;
  display: flex;
  border-right: 1px solid #e2f4fc; }
  .wrapper-body .tbl-col {
    width: 34px;
    text-align: center;
    border-right: 0;
    display: block; }
    .wrapper-body .tbl-col:last-of-type {
      border-bottom: 0; }
    .wrapper-body .tbl-col i {
      cursor: pointer;
      font-size: 16px;
      vertical-align: middle; }

/* LightBox 樣式 */
.m-lightbox-shadow {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: transparent;
  transition: 0.2s;
  z-index: 2000;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .m-lightbox-shadow.on {
    background: rgba(0, 0, 0, 0.25); }

.m-lightbox, .m-stepbox {
  width: calc(100% - 80px);
  max-height: 90vh;
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 8px;
  transition: 0.2s;
  opacity: 0;
  overflow: auto; }
  .m-lightbox.tiny, .tiny.m-stepbox {
    width: 260px; }
    .m-lightbox.tiny.on, .tiny.on.m-stepbox {
      width: 300px; }
  .m-lightbox.small, .small.m-stepbox {
    width: 355px; }
    .m-lightbox.small.on, .small.on.m-stepbox {
      width: 395px; }
  .m-lightbox.medium, .medium.m-stepbox {
    width: 520px; }
    .m-lightbox.medium.on, .medium.on.m-stepbox {
      width: 560px; }
  .m-lightbox.big, .big.m-stepbox {
    width: 720px; }
    .m-lightbox.big.on, .big.on.m-stepbox {
      width: 760px; }
  .m-lightbox.large, .large.m-stepbox {
    width: 910px; }
    .m-lightbox.large.on, .large.on.m-stepbox {
      width: 950px; }
  .m-lightbox.larger, .larger.m-stepbox {
    width: 1320px; }
    .m-lightbox.larger.on, .larger.on.m-stepbox {
      width: 1360px; }
  .m-lightbox.mega, .mega.m-stepbox {
    min-width: 910px;
    width: calc(90% - 40px); }
    .m-lightbox.mega.on, .mega.on.m-stepbox {
      min-width: 950px;
      width: 90%; }
  .m-lightbox.on, .on.m-stepbox {
    opacity: 1; }
  .m-lightbox .lightbox-title, .m-stepbox .lightbox-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.65);
    text-align: left;
    padding: 13px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    box-sizing: border-box; }
    .m-lightbox .lightbox-title > span, .m-stepbox .lightbox-title > span {
      vertical-align: bottom; }
      .m-lightbox .lightbox-title > span:not(:last-child), .m-stepbox .lightbox-title > span:not(:last-child) {
        margin-right: 10px; }
    .m-lightbox .lightbox-title > i, .m-stepbox .lightbox-title > i {
      margin-right: 10px; }
    .m-lightbox .lightbox-title .close, .m-stepbox .lightbox-title .close {
      float: right;
      cursor: pointer;
      line-height: 21px;
      margin-right: 0; }
  .m-lightbox .lightbox-body, .m-stepbox .lightbox-body {
    max-height: calc(90vh - 120px);
    padding: 32px;
    overflow: auto;
    box-sizing: border-box;
    word-break: break-word; }
  .m-lightbox .lightbox-options, .m-stepbox .lightbox-options {
    padding: 15px 32px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid transparent;
    background: #F8FCFF;
    overflow: auto;
    position: relative;
    text-align: right; }
    .m-lightbox .lightbox-options .m-btn, .m-stepbox .lightbox-options .m-btn, .m-lightbox .lightbox-options .m-label, .m-stepbox .lightbox-options .m-label, .m-lightbox .lightbox-options .daterangepicker .btn, .daterangepicker .m-lightbox .lightbox-options .btn, .m-stepbox .lightbox-options .daterangepicker .btn, .daterangepicker .m-stepbox .lightbox-options .btn {
      margin-left: 10px; }

/* StepBox 樣式 */
.m-stepbox {
  display: flex;
  flex-wrap: wrap; }
  .m-stepbox .box-step-wrap {
    width: 225px;
    box-sizing: border-box;
    border-right: 1px solid #eaeaea;
    display: inline-block; }
    .m-stepbox .box-step-wrap .box-step {
      padding: 25px 32px;
      box-sizing: border-box;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.25); }
      .m-stepbox .box-step-wrap .box-step:hover {
        background: rgba(54, 144, 230, 0.03);
        cursor: pointer; }
      .m-stepbox .box-step-wrap .box-step.on {
        color: rgba(0, 0, 0, 0.65);
        background: rgba(54, 144, 230, 0.1);
        cursor: default; }
  .m-stepbox .lightbox-body {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    padding: 0; }
    .m-stepbox .lightbox-body.has-step-bar {
      width: calc(100% - 225px); }
    .m-stepbox .lightbox-body .step-content-wrap {
      padding: 13px 24px; }
      .m-stepbox .lightbox-body .step-content-wrap .step-content {
        display: none; }
        .m-stepbox .lightbox-body .step-content-wrap .step-content.on {
          display: block; }
    .m-stepbox .lightbox-body .step-nav-wrap {
      padding: 14px 24px;
      text-align: right;
      border-top: 1px solid #eaeaea;
      background: #F8FCFF; }

/* Roll Page 樣式 */
.m-roll-page {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #fafafa;
  box-sizing: border-box;
  transition: 0.2s;
  transition: .4s;
  padding-right: 15px;
  color: rgba(0, 0, 0, 0.45);
  z-index: 6; }
  .m-roll-page.stand-by {
    transform: translateX(100%); }
  .m-roll-page .rp-handle, .m-roll-page .rp-tray {
    height: 100%;
    width: 40px;
    display: inline-block;
    float: left;
    vertical-align: top;
    position: relative; }
    .m-roll-page .rp-handle:hover .trigger-layer, .m-roll-page .rp-tray:hover .trigger-layer, .m-roll-page .rp-handle:hover .grab-bar, .m-roll-page .rp-tray:hover .grab-bar {
      height: 150px; }
    .m-roll-page .rp-handle:hover .grab-bar, .m-roll-page .rp-tray:hover .grab-bar {
      height: 130px; }
    .m-roll-page .rp-handle .trigger-layer, .m-roll-page .rp-tray .trigger-layer, .m-roll-page .rp-handle .grab-bar, .m-roll-page .rp-tray .grab-bar {
      display: inline-block;
      width: 100%;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.2s;
      cursor: pointer; }
    .m-roll-page .rp-handle .grab-bar, .m-roll-page .rp-tray .grab-bar {
      left: 50%;
      width: 6px;
      height: 78px;
      background: lightgray;
      border-radius: 3px; }
  .m-roll-page .rp-tray {
    width: calc(100% - 45px);
    background: transparent; }
    .m-roll-page .rp-tray:only-child {
      width: 100%;
      padding-left: 20px;
      box-sizing: border-box; }
  .m-roll-page .rp-title {
    font-size: 24px;
    font-weight: bolder;
    color: rgba(0, 0, 0, 0.65);
    margin: 16px 0; }
    .m-roll-page .rp-title .close {
      float: right;
      cursor: pointer;
      position: absolute;
      right: 0; }
      .m-roll-page .rp-title .close i {
        font-size: 24px;
        margin-right: 0; }
  .m-roll-page .rp-content {
    overflow: auto; }

/* Live List 樣式 */
.live-list-item {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #f2f2ff;
  color: #f2f2ff;
  padding: 5px;
  margin-bottom: 5px;
  transition: 0.2s;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer; }
  .live-list-item:hover {
    background: #f2f2ff;
    color: #ffffff; }
  .live-list-item.squeeze {
    background: #f2f2ff;
    color: #ffffff;
    width: 0;
    padding: 5px 0; }

/* UI Blocker 樣式 */
.ui-block-veil {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 9; }
  .ui-block-veil .info-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(0, 0, 0, 0.45); }
    .ui-block-veil .info-area .spinner {
      height: 40px;
      margin-bottom: 20px;
      position: relative; }
      .ui-block-veil .info-area .spinner:before {
        animation: 2s linear infinite spin;
        border: solid 3px #dfdfdf;
        border-bottom-color: #816CD9;
        border-radius: 50%;
        content: "";
        height: 40px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        transition: 0.2s; }
    .ui-block-veil .info-area .msg {
      font-weight: bolder; }

/* Feedback Message */
.notify-msg-container {
  width: 45%;
  padding: 15px;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.45);
  border: 1px solid #816CD999;
  border-radius: 5px 0 0 5px;
  position: fixed;
  opacity: 0;
  bottom: 10%;
  right: 0;
  display: inline-block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.375);
  transition: 0.2s;
  z-index: 2030; }
  .notify-msg-container.normal {
    background: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d; }
  .notify-msg-container.note {
    background: #f0f5b5;
    border-color: #f7f7c7;
    color: #bf7e03; }
  .notify-msg-container.alarm {
    background: #f2dede;
    border-color: #ebccd1;
    color: #a94442; }
  .notify-msg-container.show {
    bottom: 15%;
    opacity: 1; }
  .notify-msg-container .msg-topic {
    font-weight: bold; }
    .notify-msg-container .msg-topic i {
      margin-right: 5px; }
  .notify-msg-container .msg-desc {
    font-size: 12px; }
  .notify-msg-container .close {
    cursor: pointer;
    position: absolute;
    right: 20px; }

/* row 樣式 */
.m-row {
  color: rgba(0, 0, 0, 0.65);
  margin: 5px 0;
  padding: 5px 0; }
  .m-row.last-item-PR .column .col-sec:last-child {
    padding-right: 15px; }
  .m-row:hover .hidden {
    visibility: visible; }
  .m-row:focus .hidden {
    visibility: visible; }
  .m-row .column {
    display: inline-block;
    box-sizing: border-box;
    padding-right: 15px; }
    .m-row .column:last-child {
      padding-right: 0px; }
    .m-row .column.rp1 {
      width: 100%; }
    .m-row .column.rp2 {
      width: calc(100% / 2); }
    .m-row .column.rp3 {
      width: calc(100% / 3); }
    .m-row .column .col-sec {
      display: inline-block;
      padding-right: 15px;
      box-sizing: border-box;
      vertical-align: top;
      vertical-align: middle;
      position: relative; }
      .m-row .column .col-sec:last-child {
        padding-right: 0px; }
        .m-row .column .col-sec:last-child .hint-box {
          right: 12px; }
        .m-row .column .col-sec:last-child.re-padding-r {
          padding-right: 15px; }
          .m-row .column .col-sec:last-child.re-padding-r .hint-box {
            right: 24px; }
      .m-row .column .col-sec.no-padding-r {
        padding-right: 0; }
      .m-row .column .col-sec.tighten {
        padding-right: 5px; }
        .m-row .column .col-sec.tighten .hint-box {
          right: 14px; }
      .m-row .column .col-sec.cp0 {
        width: 0%; }
      .m-row .column .col-sec.cp0ah {
        width: 5%; }
      .m-row .column .col-sec.cp1 {
        width: 10%; }
      .m-row .column .col-sec.cp1ah {
        width: 15%; }
      .m-row .column .col-sec.cp2 {
        width: 20%; }
      .m-row .column .col-sec.cp2ah {
        width: 25%; }
      .m-row .column .col-sec.cp3 {
        width: 30%; }
      .m-row .column .col-sec.cp3ah {
        width: 35%; }
      .m-row .column .col-sec.cp4 {
        width: 40%; }
      .m-row .column .col-sec.cp4ah {
        width: 45%; }
      .m-row .column .col-sec.cp5 {
        width: 50%; }
      .m-row .column .col-sec.cp5ah {
        width: 55%; }
      .m-row .column .col-sec.cp6 {
        width: 60%; }
      .m-row .column .col-sec.cp6ah {
        width: 65%; }
      .m-row .column .col-sec.cp7 {
        width: 70%; }
      .m-row .column .col-sec.cp7ah {
        width: 75%; }
      .m-row .column .col-sec.cp8 {
        width: 80%; }
      .m-row .column .col-sec.cp8ah {
        width: 85%; }
      .m-row .column .col-sec.cp9 {
        width: 90%; }
      .m-row .column .col-sec.cp9ah {
        width: 95%; }
      .m-row .column .col-sec.cp10 {
        width: 100%; }
      .m-row .column .col-sec.cp10ah {
        width: 105%; }
      .m-row .column .col-sec .hint-box {
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(0, 0, 0, 0.25);
        user-select: none; }
      .m-row .column .col-sec .hovering {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(50%, -50%);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.375); }
      .m-row .column .col-sec .text {
        display: inline-block;
        vertical-align: middle;
        word-break: break-all; }
      .m-row .column .col-sec .sec-title {
        color: #816CD9;
        font-weight: bolder; }
      .m-row .column .col-sec label {
        width: 100%;
        vertical-align: middle;
        text-align: right;
        display: inline-block; }
        .m-row .column .col-sec label.require > .label-text:before {
          content: '*';
          color: #ff0000;
          margin-right: 5px; }
        .m-row .column .col-sec label > input, .m-row .column .col-sec label > select, .m-row .column .col-sec label > textarea, .m-row .column .col-sec label > .date-picker-btn, .m-row .column .col-sec label > .time-picker, .m-row .column .col-sec label > .sel-btns-wrapper, .m-row .column .col-sec .sel-btns-wrapper label > .sel-btn, .sel-btns-wrapper .m-row .column .col-sec label > .sel-btn, .m-row .column .col-sec label > .m-switch, .m-row .column .col-sec .m-tree-wrapper:not(.hori) .m-tree-node label > .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .m-row .column .col-sec label > .m-tree-node-name, .m-row .column .col-sec label > .m-tag-wrapper, .m-row .column .col-sec label > .condition-selector {
          margin-right: 5px;
          cursor: pointer; }
      .m-row .column .col-sec input, .m-row .column .col-sec select, .m-row .column .col-sec textarea, .m-row .column .col-sec .date-picker-btn, .m-row .column .col-sec .time-picker, .m-row .column .col-sec .sel-btns-wrapper, .m-row .column .col-sec .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .m-row .column .col-sec .sel-btn, .m-row .column .col-sec .m-switch, .m-row .column .col-sec .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .m-row .column .col-sec .m-tree-node-name, .m-row .column .col-sec .m-tag-wrapper, .m-row .column .col-sec .condition-selector {
        width: 100%; }
  .m-row .stack-bar {
    margin-top: 4px; }

/* 左側選單 or 上方選單 */
.side-menu, .top-menu {
  width: 272px;
  height: 100vh;
  background: #ffffff;
  transition: 0.2s;
  overflow-x: hidden;
  float: left;
  left: 0;
  top: 0;
  z-index: 10;
  box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.05); }
  .side-menu::-webkit-scrollbar, .top-menu::-webkit-scrollbar {
    display: none; }
  .side-menu.fixed, .fixed.top-menu {
    position: fixed; }
  .side-menu.squeeze, .squeeze.top-menu {
    width: 80px;
    overflow: visible; }
    .side-menu.squeeze .menu-header, .squeeze.top-menu .menu-header {
      min-height: 40px; }
      .side-menu.squeeze .menu-header .inner-wrapper, .squeeze.top-menu .menu-header .inner-wrapper {
        padding: 16px; }
        .side-menu.squeeze .menu-header .inner-wrapper .logo, .squeeze.top-menu .menu-header .inner-wrapper .logo {
          display: none; }
        .side-menu.squeeze .menu-header .inner-wrapper .site-name, .squeeze.top-menu .menu-header .inner-wrapper .site-name {
          display: none; }
    .side-menu.squeeze .entry-wrapper, .squeeze.top-menu .entry-wrapper {
      position: relative; }
      .side-menu.squeeze .entry-wrapper .menu-entry.current .menu-icon, .squeeze.top-menu .entry-wrapper .menu-entry.current .menu-icon, .side-menu.squeeze .entry-wrapper .menu-entry.current .next-icon, .squeeze.top-menu .entry-wrapper .menu-entry.current .next-icon {
        color: #6d6ee8; }
      .side-menu.squeeze .entry-wrapper .menu-entry .next-icon, .squeeze.top-menu .entry-wrapper .menu-entry .next-icon {
        opacity: 0; }
      .side-menu.squeeze .entry-wrapper .entry-package, .squeeze.top-menu .entry-wrapper .entry-package {
        margin-top: 0; }
      .side-menu.squeeze .entry-wrapper:hover > .entry-package, .squeeze.top-menu .entry-wrapper:hover > .entry-package {
        background: #ffffff;
        position: absolute;
        right: -16px;
        right: 0;
        top: 0;
        padding-left: 10px;
        transform: translateX(100%);
        height: auto;
        overflow-y: unset;
        box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.05); }
        .side-menu.squeeze .entry-wrapper:hover > .entry-package .entry-wrapper, .squeeze.top-menu .entry-wrapper:hover > .entry-package .entry-wrapper {
          background: #ffffff; }
          .side-menu.squeeze .entry-wrapper:hover > .entry-package .entry-wrapper .entry-package, .squeeze.top-menu .entry-wrapper:hover > .entry-package .entry-wrapper .entry-package {
            background: #ffffff; }
  .side-menu .menu-header, .top-menu .menu-header {
    width: 100%;
    height: 60px;
    color: rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    overflow: hidden;
    background: #5b66e1;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1; }
    .side-menu .menu-header .inner-wrapper, .top-menu .menu-header .inner-wrapper {
      width: 100%;
      height: 100%;
      padding: 15px 30px;
      background: rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
      white-space: nowrap; }
    .side-menu .menu-header .logo, .top-menu .menu-header .logo {
      margin-right: 10px;
      vertical-align: middle;
      cursor: pointer;
      float: left; }
    .side-menu .menu-header .site-name, .top-menu .menu-header .site-name {
      color: #ffffff;
      font: 'Arial Rounded';
      font-size: 20px;
      font-weight: bold; }
    .side-menu .menu-header .toggleMenu, .top-menu .menu-header .toggleMenu {
      line-height: 30px;
      position: absolute;
      color: #ffffff;
      font-size: 20px;
      top: 15px;
      right: 23px;
      padding: 0 10px;
      cursor: pointer; }
      .side-menu .menu-header .toggleMenu i, .top-menu .menu-header .toggleMenu i {
        color: #ffffff;
        font-size: 16px;
        padding: 10px;
        display: block; }
  .side-menu .menu-body, .top-menu .menu-body {
    padding: 16px;
    box-sizing: border-box; }
  .side-menu .entry-wrapper:hover, .top-menu .entry-wrapper:hover {
    background: transparent; }
  .side-menu .entry-wrapper.expand > .menu-entry .next-icon, .top-menu .entry-wrapper.expand > .menu-entry .next-icon {
    transform: rotate(-90deg); }
  .side-menu .entry-wrapper .entry-wrapper:hover, .top-menu .entry-wrapper .entry-wrapper:hover {
    background: #f2f2ff; }
  .side-menu .entry-wrapper .entry-wrapper:last-of-type, .top-menu .entry-wrapper .entry-wrapper:last-of-type {
    margin-bottom: 0; }
  .side-menu .entry-wrapper .entry-package, .top-menu .entry-wrapper .entry-package {
    transition: 0.2s;
    overflow-y: hidden;
    margin-top: 10px;
    padding-left: 30px; }
    .side-menu .entry-wrapper .entry-package.squeeze, .top-menu .entry-wrapper .entry-package.squeeze {
      height: 0;
      margin-top: 0px; }
    .side-menu .entry-wrapper .entry-package .menu-entry, .top-menu .entry-wrapper .entry-package .menu-entry {
      padding: 9px 15px;
      color: rgba(0, 0, 0, 0.45); }
      .side-menu .entry-wrapper .entry-package .menu-entry:hover, .top-menu .entry-wrapper .entry-package .menu-entry:hover {
        background: #f2f2ff; }
      .side-menu .entry-wrapper .entry-package .menu-entry.selected .menu-name, .top-menu .entry-wrapper .entry-package .menu-entry.selected .menu-name {
        color: #6d6ee8; }
  .side-menu .menu-entry, .top-menu .menu-entry {
    color: rgba(0, 0, 0, 0.45);
    padding: 13px 15px;
    cursor: pointer;
    border-radius: 3px; }
    .side-menu .menu-entry.squeeze, .top-menu .menu-entry.squeeze {
      background: rgba(0, 0, 0, 0.3); }
    .side-menu .menu-entry:hover, .top-menu .menu-entry:hover {
      background: #f2f2ff; }
    .side-menu .menu-entry.current .menu-name, .top-menu .menu-entry.current .menu-name {
      color: rgba(0, 0, 0, 0.65);
      font-weight: bold; }
    .side-menu .menu-entry.current img, .top-menu .menu-entry.current img {
      filter: drop-shadow(0 0 0 #ffffff); }
    .side-menu .menu-entry .menu-icon, .top-menu .menu-entry .menu-icon, .side-menu .menu-entry .next-icon, .top-menu .menu-entry .next-icon {
      width: 20px;
      height: 19px;
      margin-right: 10px;
      float: left;
      vertical-align: middle;
      text-align: center;
      transition: 0.2s;
      background-repeat: no-repeat;
      background-blend-mode: screen; }
      .side-menu .menu-entry .menu-icon i, .top-menu .menu-entry .menu-icon i, .side-menu .menu-entry .next-icon i, .top-menu .menu-entry .next-icon i {
        font-size: 15px;
        margin-right: 15px;
        padding-top: 3px;
        display: block; }
      .side-menu .menu-entry .menu-icon img, .top-menu .menu-entry .menu-icon img, .side-menu .menu-entry .next-icon img, .top-menu .menu-entry .next-icon img {
        max-width: 20px; }
    .side-menu .menu-entry .menu-name, .top-menu .menu-entry .menu-name {
      white-space: nowrap;
      overflow: hidden; }
    .side-menu .menu-entry .next-icon, .top-menu .menu-entry .next-icon {
      width: auto;
      line-height: 19px;
      position: absolute;
      right: 30px;
      color: rgba(0, 0, 0, 0.45);
      transition: 0.2s;
      opacity: 1;
      transform: rotate(90deg); }
  .side-menu .selected, .top-menu .selected {
    color: #F8FCFF;
    color: #f9ce00 !important; }
    .side-menu .selected .menu-icon, .top-menu .selected .menu-icon, .side-menu .selected .menu-entry .next-icon, .side-menu .menu-entry .selected .next-icon, .top-menu .selected .menu-entry .next-icon, .top-menu .menu-entry .selected .next-icon {
      color: #6d6ee8; }

.top-menu {
  width: 100%;
  height: 55px;
  background: #816CD9;
  overflow-x: unset;
  overflow-y: visible; }
  .top-menu.squeeze {
    width: 100%; }
  .top-menu .menu-header {
    width: 120px;
    height: 55px;
    padding: 15px 13px 15px 40px;
    display: inline-block; }
    .top-menu .menu-header .logo {
      width: 100%;
      margin: 0; }
      .top-menu .menu-header .logo img {
        height: 25px; }
  .top-menu > a {
    display: inline-block;
    vertical-align: top; }
  .top-menu .entry-wrapper {
    display: inline-block;
    vertical-align: top; }
    .top-menu .entry-wrapper.expand .menu-entry:hover {
      background: rgba(255, 255, 255, 0.1); }
    .top-menu .entry-wrapper.expand .menu-entry .next-icon {
      transform: rotate(-90deg); }
    .top-menu .entry-wrapper .entry-package {
      padding: 0; }
      .top-menu .entry-wrapper .entry-package .menu-entry {
        padding-right: 0; }
    .top-menu .entry-wrapper .next-icon {
      transform: rotate(90deg);
      float: none; }
  .top-menu .menu-entry {
    min-height: 29px;
    line-height: 29px; }
    .top-menu .menu-entry .menu-icon, .top-menu .menu-entry .next-icon {
      margin-top: 5px; }
    .top-menu .menu-entry .menu-name span {
      margin-right: 10px; }
    .top-menu .menu-entry .next-icon {
      margin-top: 0; }
  .top-menu .selected .menu-name:after {
    content: none; }

/* 右方主要區塊 */
.work-area {
  min-height: 100vh;
  width: calc(100% - 80px);
  transition: 0.2s;
  float: right; }
  .work-area.squeeze {
    width: calc(100% - 272px);
    float: right; }
    .work-area.squeeze .header-main {
      width: 100%; }
  .work-area .work-area-content {
    box-sizing: border-box;
    min-height: calc(100vh - 60px); }
  .work-area .content {
    width: 100%;
    background: transparent;
    box-sizing: border-box;
    transition: 0.2s; }
    .work-area .content .content-header {
      margin: 0 56px 16px 56px;
      padding-top: 16px; }
    .work-area .content .crumbs-wrap {
      margin-bottom: 8px; }
      .work-area .content .crumbs-wrap .crumb-node {
        color: rgba(0, 0, 0, 0.45); }
        .work-area .content .crumbs-wrap .crumb-node:hover {
          color: black; }
        .work-area .content .crumbs-wrap .crumb-node span {
          cursor: pointer; }
      .work-area .content .crumbs-wrap .to-icon {
        width: 6px;
        height: 6px;
        border-top: 1px solid rgba(0, 0, 0, 0.25);
        border-right: 1px solid rgba(0, 0, 0, 0.25);
        display: inline-block;
        transform: rotate(45deg) translate(1px, -2px);
        margin: 0 10px 0 2px; }
    .work-area .content .title-bar {
      margin-bottom: 8px; }
      .work-area .content .title-bar .title {
        color: rgba(0, 0, 0, 0.65);
        font-family: 'Noto Sans TC', 'Microsoft Jhenghei';
        font-style: normal;
        font-weight: bold;
        margin-bottom: 2px;
        position: relative; }
        .work-area .content .title-bar .title .title-icon, .work-area .content .title-bar .title .title-text, .work-area .content .title-bar .title .title-left, .work-area .content .title-bar .title .title-right {
          margin-right: 10px;
          display: inline-block;
          vertical-align: middle; }
        .work-area .content .title-bar .title .title-text {
          font-size: 24px; }
        .work-area .content .title-bar .title .title-left, .work-area .content .title-bar .title .title-right {
          font-size: 16px;
          margin-right: 0; }
          .work-area .content .title-bar .title .title-left .m-row, .work-area .content .title-bar .title .title-right .m-row {
            margin: 0;
            padding: 0; }
        .work-area .content .title-bar .title .title-right {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%); }
          .work-area .content .title-bar .title .title-right .col-sec {
            padding: 0; }
        .work-area .content .title-bar .title .m-btn, .work-area .content .title-bar .title .m-label, .work-area .content .title-bar .title .daterangepicker .btn, .daterangepicker .work-area .content .title-bar .title .btn {
          font-size: 16px;
          font-weight: unset;
          margin-left: 10px; }
        .work-area .content .title-bar .title span {
          vertical-align: middle; }
        .work-area .content .title-bar .title select {
          border-color: #816CD9; }
      .work-area .content .title-bar .subtitle-bar {
        max-width: 75%;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.45);
        display: flex; }
        .work-area .content .title-bar .subtitle-bar .subtitle {
          display: -webkit-inline-box;
          transition: 0.2s; }
          .work-area .content .title-bar .subtitle-bar .subtitle.min {
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden; }
        .work-area .content .title-bar .subtitle-bar .control {
          min-width: 65px;
          margin-left: 10px;
          text-decoration: underline;
          cursor: pointer; }
          .work-area .content .title-bar .subtitle-bar .control:hover {
            color: #816CD9; }
    .work-area .content .head-structure {
      margin-bottom: 8px; }
      .work-area .content .head-structure .m-row {
        padding: 0;
        margin: 0; }

/* 影片播放器樣式 */
.m-video-wrapper {
  background: #666666;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative; }
  .m-video-wrapper .video {
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .m-video-wrapper .video i {
      font-size: 12px; }

/* 格狀資料區塊 */
.m-grid {
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 16px 23px;
  position: relative;
  background: #ffffff; }
  .m-grid .g-head {
    color: rgba(0, 0, 0, 0.65);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between; }
    .m-grid .g-head .g-head-sec {
      width: calc(100% / 3);
      flex-grow: 1; }
      .m-grid .g-head .g-head-sec:last-child {
        text-align: right; }
      .m-grid .g-head .g-head-sec .m-row {
        padding: 0;
        margin: 0; }
    .m-grid .g-head .title {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      vertical-align: middle; }
  .m-grid .g-body {
    width: 100%;
    box-sizing: border-box; }

.grid-container {
  width: 100%;
  max-height: calc(100vh - 60px);
  padding: 10px 10px;
  transition: 0.2s;
  overflow: auto;
  float: left;
  box-sizing: border-box; }
  .grid-container.squeezed {
    width: calc(100% - 300px); }
    .grid-container.squeezed .video-grid {
      width: calc(100% / 3 - 20px); }
  .grid-container .video-grid {
    width: calc(25% - 20px);
    box-sizing: border-box;
    margin: 10px;
    border: 1px solid #cccccc;
    transition: 0.2s;
    float: left; }
    .grid-container .video-grid.selected {
      border-color: #0057a6; }
    .grid-container .video-grid .thumb-nail {
      width: calc(100% - 10px);
      height: 160px;
      border: 1px solid #cccccc;
      background: #f1f1f1;
      margin: auto;
      margin-top: 5px; }
    .grid-container .video-grid .m-row {
      margin: 0;
      padding: 5px;
      overflow: auto; }
      .grid-container .video-grid .m-row .item, .grid-container .video-grid .m-row .text {
        width: 80px;
        padding-right: 10px;
        float: left;
        box-sizing: border-box; }
      .grid-container .video-grid .m-row .text {
        width: calc(100% - 80px - 10px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }

/* 測試影片區塊 */
.player-container {
  width: 300px;
  height: calc(100vh - 60px);
  box-sizing: border-box;
  border-left: 1px solid #cccccc;
  transition: 0.2s;
  float: left;
  padding: 20px 10px 10px 10px; }
  .player-container.squeezed {
    width: 0;
    height: 0;
    padding: 0; }

/* 樹狀圖樣式 */
.wire-style, .m-tree-wrapper .m-tree-node .node-package:not(:empty)::before, .m-tree-wrapper .m-tree-node .node-package > .m-tree-node:not(:only-child)::before, .m-tree-wrapper .m-tree-node .node-package > .m-tree-node:not(:first-child)::after {
  z-index: 1;
  content: '';
  position: absolute; }

.m-tree-wrapper {
  box-sizing: border-box;
  overflow: auto; }
  .m-tree-wrapper:not(.hori) .m-tree-node {
    display: block; }
    .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node {
      padding-top: 10px;
      position: relative; }
      .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node:has(+ .m-tree-node) {
        margin-bottom: 0; }
      .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node:before {
        content: '';
        display: block;
        width: 0;
        height: 100%;
        border-left: 1px solid #816CD999;
        position: absolute;
        top: 0;
        left: -20px; }
      .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node:last-child:before {
        height: 28px; }
    .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name {
      display: inline-block;
      border-radius: 8px;
      background: #ffdede;
      position: relative;
      transition: 0.2s;
      white-space: nowrap;
      color: #816CD9;
      user-select: none;
      cursor: pointer; }
      .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name i {
        width: 12px;
        margin-right: 10px; }
        .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name i:last-child {
          margin-left: 10px;
          margin-right: 0;
          color: rgba(0, 0, 0, 0.25); }
        .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name i.checked {
          color: #816CD9; }
      .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name:hover {
        border-color: rgba(0, 0, 0, 0.45); }
      .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name.on-menu, .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name.root {
        color: rgba(0, 0, 0, 0.65);
        background: #ffffff; }
  .m-tree-wrapper:not(.hori) .m-tree-folder {
    height: 0;
    transition: 0.2s;
    padding-left: 20px;
    margin-left: 20px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative; }
    .m-tree-wrapper:not(.hori) .m-tree-folder.expand {
      height: auto; }
    .m-tree-wrapper:not(.hori) .m-tree-folder .m-tree-node-name:before {
      content: '';
      width: 20px;
      height: 0;
      border-bottom: 1px solid #816CD999;
      display: block;
      position: absolute;
      top: 50%;
      left: -20px;
      box-sizing: border-box; }
  .m-tree-wrapper .m-btn:not(:first-child), .m-tree-wrapper .m-label:not(:first-child), .m-tree-wrapper .daterangepicker .btn:not(:first-child), .daterangepicker .m-tree-wrapper .btn:not(:first-child) {
    margin-left: 10px; }
  .m-tree-wrapper .m-tree-root {
    padding-bottom: 15px; }
    .m-tree-wrapper .m-tree-root > .node-content .event-card {
      width: 55px; }
    .m-tree-wrapper .m-tree-root > .node-package {
      margin-left: 0 !important; }
      .m-tree-wrapper .m-tree-root > .node-package::before {
        content: none !important; }
  .m-tree-wrapper .m-tree-node {
    display: flex;
    position: relative; }
    .m-tree-wrapper .m-tree-node:has(+ .m-tree-node) {
      margin-bottom: 32px; }
    .m-tree-wrapper .m-tree-node .node-content {
      position: relative; }
    .m-tree-wrapper .m-tree-node .node-package {
      position: relative; }
      .m-tree-wrapper .m-tree-node .node-package:not(:empty) {
        margin-left: 32px; }
        .m-tree-wrapper .m-tree-node .node-package:not(:empty)::before {
          width: 32px;
          height: 0;
          border-top: 3px solid rgba(0, 0, 0, 0.03);
          left: -32px;
          top: 26px; }
      .m-tree-wrapper .m-tree-node .node-package.uncollapse {
        height: 0;
        overflow: hidden; }
      .m-tree-wrapper .m-tree-node .node-package > .m-tree-node:not(:only-child)::before {
        width: 0;
        height: calc(100% + 32px);
        border-right: 3px solid rgba(0, 0, 0, 0.03);
        left: -18px;
        top: 29px; }
      .m-tree-wrapper .m-tree-node .node-package > .m-tree-node:not(:first-child)::after {
        width: 15px;
        height: 0;
        border-top: 3px solid rgba(0, 0, 0, 0.03);
        left: -15px;
        top: 26px; }
      .m-tree-wrapper .m-tree-node .node-package > .m-tree-node:last-child::before {
        content: unset !important; }

/* 浮動資訊卡樣式 */
.m-info-card {
  position: fixed;
  min-width: 240px;
  max-width: 680px;
  min-height: 200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.075), 0 6px 50px rgba(0, 0, 0, 0.275);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 1;
  background: #ffffff;
  z-index: 2010; }
  .m-info-card.origin {
    margin-top: -20px;
    opacity: 0; }
  .m-info-card .info-title {
    padding: 20px 10px;
    color: #d9d9ff;
    border-bottom: 1px solid #eaeaea; }
  .m-info-card .info-content {
    max-height: 410px;
    overflow: auto; }

/* 右上使用者通知訊息 */
.info-title .clear-all {
  float: right;
  font-size: 16px;
  padding: 3px;
  border: 1px solid #d9d9ff;
  border-radius: 3px;
  cursor: pointer;
  transform: translateY(-20%);
  transition: 0.2s; }
  .info-title .clear-all:hover {
    background: #d9d9ff;
    color: #ffffff; }

.notification-row {
  padding: 10px 10px;
  color: rgba(0, 0, 0, 0.65);
  transition: 0.2s;
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
  overflow: auto; }
  .notification-row:hover {
    background: rgba(128, 246, 255, 0.3);
    background: rgba(0, 175, 188, 0.06); }
  .notification-row.shift {
    opacity: 0;
    transform: translateX(-50%); }
  .notification-row.new {
    background: rgba(38, 186, 174, 0.15); }
    .notification-row.new .noti-item {
      background: rgba(38, 186, 174, 0.35);
      color: #ffffff; }
  .notification-row .side {
    float: left;
    width: calc(100% - 30px); }
    .notification-row .side.r {
      width: 30px;
      box-sizing: border-box;
      height: 61px;
      border-left: 1px solid #eaeaea;
      cursor: pointer;
      position: relative; }
      .notification-row .side.r:hover i {
        color: #d76161; }
      .notification-row .side.r i {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.25);
        transition: 0.2s;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% + 5px), -50%); }
  .notification-row .noti-item {
    padding-bottom: 2px;
    margin-bottom: 2px;
    color: #0057a6;
    font-weight: bold; }
  .notification-row .noti-msg {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px; }
  .notification-row .time-stamp {
    color: rgba(0, 0, 0, 0.25); }

/* 右上快速搜尋 */
.fa-search-card {
  width: 375px; }
  .fa-search-card .info-content {
    padding: 10px 0; }
    .fa-search-card .info-content .fa-search-row {
      padding-left: 10px;
      padding-right: 10px; }

/* 右上使用者資訊 */
.avatar-wrapper {
  display: flex; }
  .avatar-wrapper .profile-panel {
    display: flex;
    flex-direction: column;
    transition: 0.2s; }
    .avatar-wrapper .profile-panel.expand {
      background: #ffffff;
      width: 240px;
      padding: 0 20px 0 20px;
      box-sizing: border-box;
      height: fit-content;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 15px rgba(0, 0, 0, 0.15);
      border-radius: 0 0 10px 10px; }
      .avatar-wrapper .profile-panel.expand .avatar {
        text-align: right;
        color: rgba(0, 0, 0, 0.45); }
        .avatar-wrapper .profile-panel.expand .avatar .user-name {
          color: rgba(0, 0, 0, 0.65); }
      .avatar-wrapper .profile-panel.expand .profile {
        display: block; }
      .avatar-wrapper .profile-panel.expand .options {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px; }
    .avatar-wrapper .profile-panel .avatar {
      height: 60px;
      display: flex;
      align-items: center;
      cursor: pointer; }
      .avatar-wrapper .profile-panel .avatar .user-pic {
        font-size: 26px; }
      .avatar-wrapper .profile-panel .avatar .user-name {
        margin-left: 10px; }
    .avatar-wrapper .profile-panel .profile {
      display: none; }
    .avatar-wrapper .profile-panel .options {
      display: none; }
      .avatar-wrapper .profile-panel .options .m-btn:not(:first-child), .avatar-wrapper .profile-panel .options .m-label:not(:first-child), .avatar-wrapper .profile-panel .options .daterangepicker .btn:not(:first-child), .daterangepicker .avatar-wrapper .profile-panel .options .btn:not(:first-child) {
        margin-left: 10px; }

/* tag 建立器 */
.m-tag {
  border: 2px solid #816CD999;
  border-radius: 8px;
  background: transparent;
  padding: 8px 16px;
  font-size: 16px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  height: 36px;
  transition: .1s;
  cursor: pointer; }
  .m-tag.btn {
    font-size: 20px;
    font-weight: 700; }
    .m-tag.btn:hover {
      background: #816cd933; }
    .m-tag.btn.active {
      background: -webkit-linear-gradient(rgba(137, 124, 255, 0.4), rgba(137, 124, 255, 0) 80%), -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(145, 129, 214, 0.9) 75%);
      color: #ffffff;
      border: 2px solid #FFFFFF99; }
  .m-tag.text {
    font-family: 'Microsoft JhengHei' !important;
    font-weight: normal;
    color: #816CD9;
    border: none !important;
    background: transparent !important;
    font-size: 22px;
    font-weight: 400; }
    .m-tag.text:hover {
      text-decoration: underline; }
    .m-tag.text.active {
      font-weight: bold;
      color: #4C3A99; }
  .m-tag i {
    font-size: 16px; }
  .m-tag .tag-icon {
    margin-right: 3px; }
  .m-tag .remove {
    margin: 0 2px 0 5px;
    cursor: pointer;
    font-size: 16px; }

.m-tag-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: fit-content; }
  .m-tag-wrapper.no-frame {
    border: 0;
    padding: 0 !important;
    background: transparent; }
  .m-tag-wrapper.block {
    overflow: auto; }
    .m-tag-wrapper.block .tags {
      margin-bottom: 5px; }
    .m-tag-wrapper.block .m-tag {
      color: #1f80dc;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background: #e3f2ff;
      padding: 4px 10px;
      margin-bottom: 5px;
      margin: 2px;
      float: left; }
      .m-tag-wrapper.block .m-tag .remove {
        margin: 0 2px 0 5px;
        cursor: pointer;
        font-size: 16px; }
  .m-tag-wrapper .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; }
  .m-tag-wrapper input, .m-tag-wrapper select, .m-tag-wrapper textarea, .m-tag-wrapper .date-picker-btn, .m-tag-wrapper .time-picker, .m-tag-wrapper .sel-btns-wrapper, .m-tag-wrapper .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .m-tag-wrapper .sel-btn, .m-tag-wrapper .m-switch, .m-tag-wrapper .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .m-tag-wrapper .m-tree-node-name, .m-tag-wrapper .m-tag-wrapper, .m-tag-wrapper .condition-selector {
    min-width: 50px;
    height: 21px;
    padding: 0;
    border: 0;
    background: #ffffff;
    flex-grow: 1; }
    .m-tag-wrapper input:focus, .m-tag-wrapper select:focus, .m-tag-wrapper textarea:focus, .m-tag-wrapper .date-picker-btn:focus, .m-tag-wrapper .time-picker:focus, .m-tag-wrapper .sel-btns-wrapper:focus, .m-tag-wrapper .sel-btns-wrapper .sel-btn:focus, .sel-btns-wrapper .m-tag-wrapper .sel-btn:focus, .m-tag-wrapper .m-switch:focus, .m-tag-wrapper .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name:focus, .m-tree-wrapper:not(.hori) .m-tree-node .m-tag-wrapper .m-tree-node-name:focus, .m-tag-wrapper .m-tag-wrapper:focus, .m-tag-wrapper .condition-selector:focus {
      box-shadow: none; }
  .m-tag-wrapper .default-blank {
    min-height: 13 0px; }

/* time line */
.event-wrapper {
  display: flex; }
  .event-wrapper:first-of-type .axis-wrapper .axis {
    height: calc(100% - 40px);
    margin-top: 40px; }
  .event-wrapper:last-of-type .axis-wrapper .axis {
    height: 60px;
    position: relative; }
    .event-wrapper:last-of-type .axis-wrapper .axis:after {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #26baae;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%); }
  .event-wrapper:only-of-type .axis-wrapper .axis {
    display: none; }
  .event-wrapper .axis-wrapper {
    width: 50px;
    min-height: 90px;
    box-sizing: border-box;
    text-align: center;
    position: relative; }
    .event-wrapper .axis-wrapper .axis {
      width: 2px;
      height: 100%;
      background: #26baae;
      opacity: .5;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.375);
      display: inline-block; }
    .event-wrapper .axis-wrapper .node {
      width: 50px;
      height: 50px;
      background: linear-gradient(#26baae, #069bba);
      border: 2px solid #069bba;
      border-radius: 50%;
      position: absolute;
      color: #ffffff;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0); }
      .event-wrapper .axis-wrapper .node.success {
        background: #2eb82e; }
      .event-wrapper .axis-wrapper .node.fail {
        background: #d76161; }
      .event-wrapper .axis-wrapper .node i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px; }
      .event-wrapper .axis-wrapper .node .date .day {
        font-size: 20px;
        font-weight: bold;
        display: block; }
      .event-wrapper .axis-wrapper .node .date .month {
        font-size: 10px;
        display: inline-block;
        margin-top: -5px; }
  .event-wrapper .card {
    width: calc(100% - 50px - 20px);
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    margin-bottom: 20px;
    margin-left: 20px;
    display: flex; }
    .event-wrapper .card .info, .event-wrapper .card .status {
      width: calc(100% - 60px);
      padding: 20px;
      box-sizing: border-box; }
      .event-wrapper .card .info .title-b, .event-wrapper .card .status .title-b {
        color: rgba(0, 0, 0, 0.65);
        font-weight: bold; }
      .event-wrapper .card .info .title-s, .event-wrapper .card .status .title-s {
        margin-top: 4px;
        font-size: 12px; }
      .event-wrapper .card .info .event-content, .event-wrapper .card .status .event-content {
        margin-top: 10px; }
    .event-wrapper .card .status {
      width: 60px;
      border-radius: 0 5px 5px 0;
      color: #ffffff;
      position: relative;
      opacity: 0.8; }
      .event-wrapper .card .status.complete {
        background: #007bff; }
      .event-wrapper .card .status.fail {
        background: #e93924; }

/* Dropzone 檔案上傳框 */
.dropzone {
  width: 100%;
  min-height: 100px;
  margin: auto;
  border: 1px dashed #816CD9;
  border-radius: 8px;
  position: relative;
  overflow: auto; }
  .dropzone .dz-message {
    width: 100%;
    color: rgba(0, 0, 0, 0.45);
    margin: 0 !important;
    padding: 20px 0;
    text-align: center; }
    .dropzone .dz-message .highlight {
      color: #816CD9; }
    .dropzone .dz-message img {
      display: inline-block; }
    .dropzone .dz-message i {
      color: rgba(0, 0, 0, 0.16);
      display: block;
      font-size: 80px; }

/* Dropzone 檔案預覽小卡 */
.dz-preview {
  width: 120px;
  background: transparent !important; }
  .dz-preview:hover img {
    transform: translate(-50%, -50%) !important; }
  .dz-preview .dz-image {
    position: relative; }
    .dz-preview .dz-image i {
      font-size: 70px; }
  .dz-preview .dz-remove-file i {
    top: 71% !important; }
  .dz-preview .dz-progress {
    top: auto !important;
    bottom: 5px;
    opacity: 1 !important; }
  .dz-preview .dz-details {
    height: 100%;
    position: relative; }
    .dz-preview .dz-details i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      color: #f4f4f4;
      cursor: pointer;
      transition: 0.2s;
      text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1), 0px 0px 16px rgba(0, 0, 0, 0.1); }
      .dz-preview .dz-details i:hover {
        color: #cc0000;
        font-size: 58px; }
  .dz-preview .info, .dz-preview .event-wrapper .card .status, .event-wrapper .card .dz-preview .status {
    max-width: 100%;
    font-size: 12px;
    text-align: center; }
    .dz-preview .info .dz-size, .dz-preview .event-wrapper .card .status .dz-size, .event-wrapper .card .dz-preview .status .dz-size, .dz-preview .info .dz-filename, .dz-preview .event-wrapper .card .status .dz-filename, .event-wrapper .card .dz-preview .status .dz-filename {
      max-width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }

/* 審核結果文字樣式 */
.m-table .tbl-body .tbl-col.v-res-agree, .m-table-std .tbl-body .tbl-col.v-res-agree {
  color: #2eb82e; }

.m-table .tbl-body .tbl-col.v-res-reject, .m-table-std .tbl-body .tbl-col.v-res-reject {
  color: #e93924; }

.m-table .tbl-body .tbl-col.v-res-part-reject, .m-table-std .tbl-body .tbl-col.v-res-part-reject {
  color: #ff8c1a; }

.v-res-agree {
  color: #2eb82e; }

.v-res-reject {
  color: #e93924; }

.v-res-part-reject {
  color: #ff8c1a; }

/* 資訊卡樣式 */
.m-info-wrap {
  display: inline-block;
  position: relative; }
  .m-info-wrap .icon, .m-info-wrap .m-collapse .collapse-head .arrow, .m-collapse .collapse-head .m-info-wrap .arrow, .m-info-wrap .m-collapse .sub-head .arrow, .m-collapse .sub-head .m-info-wrap .arrow {
    cursor: pointer; }
  .m-info-wrap .m-info-content {
    min-height: 42px;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(0, 0, 0, 0.02);
    padding: 10px 20px;
    border-radius: 8px;
    position: absolute;
    top: calc(0% - 10px);
    left: calc(100% + 13px);
    z-index: 10;
    box-sizing: border-box;
    white-space: nowrap; }
    .m-info-wrap .m-info-content:after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-right-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      right: 100%;
      top: 10px; }
    .m-info-wrap .m-info-content.on-left {
      left: 0;
      transform: translateX(calc(-100% - 13px)); }
      .m-info-wrap .m-info-content.on-left:after {
        right: -20px;
        top: 10px;
        border-right-color: transparent;
        border-left-color: rgba(0, 0, 0, 0.8); }
    .m-info-wrap .m-info-content .m-row {
      color: inherit; }

/* 跳窗選擇器樣式 */
.m-dia-selector .input-wrap {
  width: calc(100% - 40px);
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top; }
  .m-dia-selector .input-wrap input, .m-dia-selector .input-wrap select, .m-dia-selector .input-wrap textarea, .m-dia-selector .input-wrap .date-picker-btn, .m-dia-selector .input-wrap .time-picker, .m-dia-selector .input-wrap .sel-btns-wrapper, .m-dia-selector .input-wrap .sel-btns-wrapper .sel-btn, .sel-btns-wrapper .m-dia-selector .input-wrap .sel-btn, .m-dia-selector .input-wrap .m-switch, .m-dia-selector .input-wrap .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name, .m-tree-wrapper:not(.hori) .m-tree-node .m-dia-selector .input-wrap .m-tree-node-name, .m-dia-selector .input-wrap .m-tag-wrapper, .m-dia-selector .input-wrap .condition-selector {
    border-radius: 3px 0 0 3px; }
    .m-dia-selector .input-wrap input[readonly], .m-dia-selector .input-wrap select[readonly], .m-dia-selector .input-wrap select[disabled], .m-dia-selector .input-wrap textarea[readonly], .m-dia-selector .input-wrap .date-picker-btn[readonly], .m-dia-selector .input-wrap .time-picker[readonly], .m-dia-selector .input-wrap .sel-btns-wrapper[readonly], .m-dia-selector .input-wrap .sel-btns-wrapper .sel-btn[readonly], .sel-btns-wrapper .m-dia-selector .input-wrap .sel-btn[readonly], .m-dia-selector .input-wrap .m-switch[readonly], .m-dia-selector .input-wrap .m-tree-wrapper:not(.hori) .m-tree-node .m-tree-node-name[readonly], .m-tree-wrapper:not(.hori) .m-tree-node .m-dia-selector .input-wrap .m-tree-node-name[readonly], .m-dia-selector .input-wrap .m-tag-wrapper[readonly], .m-dia-selector .input-wrap .condition-selector[readonly] {
      background: #ffffff; }

.m-dia-selector .btn-wrap {
  width: 40px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top; }
  .m-dia-selector .btn-wrap .m-btn, .m-dia-selector .btn-wrap .m-label, .m-dia-selector .btn-wrap .daterangepicker .btn, .daterangepicker .m-dia-selector .btn-wrap .btn {
    height: 34px;
    width: 100%;
    border-radius: 0 3px 3px 0; }

/* 更多選項 樣式 */
.m-more-wrap {
  display: inline-block;
  position: absolute; }
  .m-more-wrap .icon, .m-more-wrap .m-collapse .collapse-head .arrow, .m-collapse .collapse-head .m-more-wrap .arrow, .m-more-wrap .m-collapse .sub-head .arrow, .m-collapse .sub-head .m-more-wrap .arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer; }
    .m-more-wrap .icon:hover, .m-more-wrap .m-collapse .collapse-head .arrow:hover, .m-collapse .collapse-head .m-more-wrap .arrow:hover, .m-more-wrap .m-collapse .sub-head .arrow:hover, .m-collapse .sub-head .m-more-wrap .arrow:hover {
      background: rgba(0, 0, 0, 0.07); }
    .m-more-wrap .icon img, .m-more-wrap .m-collapse .collapse-head .arrow img, .m-collapse .collapse-head .m-more-wrap .arrow img, .m-more-wrap .m-collapse .sub-head .arrow img, .m-collapse .sub-head .m-more-wrap .arrow img {
      width: 60%; }
  .m-more-wrap .m-more-menu {
    color: rgba(0, 0, 0, 0.65);
    border-radius: 3px;
    border: 1px solid #cccccc;
    background: #ffffff;
    position: absolute;
    top: calc(0% - 10px);
    left: calc(100% + 13px);
    z-index: 10;
    box-sizing: border-box;
    white-space: nowrap; }
    .m-more-wrap .m-more-menu.on-left {
      left: 0;
      transform: translateX(calc(-100% - 13px)); }
    .m-more-wrap .m-more-menu .op {
      padding: 5px 10px;
      cursor: pointer; }
      .m-more-wrap .m-more-menu .op:hover {
        background: rgba(56, 110, 249, 0.1); }
      .m-more-wrap .m-more-menu .op .op-icon {
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle; }

/* 項目池 樣式 */
.m-item-pool .pool-tag {
  background: rgba(82, 189, 242, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 3px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.45); }
  .m-item-pool .pool-tag .remove {
    display: inline-block;
    margin-left: 5px;
    cursor: pointer; }

/* 評分星星 樣式 */
.m-ratingstar-wrapper {
  display: inline-block; }
  .m-ratingstar-wrapper .star {
    color: rgba(0, 0, 0, 0.151); }
    .m-ratingstar-wrapper .star.light-up {
      color: #ffd911; }

/* more-info style */
.m-info {
  color: #797979;
  display: inline-block;
  vertical-align: top;
  font-size: 17px;
  margin-left: 15px;
  position: absolute; }
  .m-info:hover > .detail {
    display: block; }
  .m-info .detail {
    background: #ffffff;
    font-size: 16px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    padding: 4px 10px;
    top: 100%;
    left: 200%;
    transform: translate(30px, -100%);
    display: none; }
    .m-info .detail .m-row {
      padding: 0; }
    .m-info .detail .detail-title {
      color: #3690e6; }

/* 頁面底部的對話框 */
.m-dialogue-btm {
  width: 100%;
  padding: 24px 56px;
  background: #ffffff;
  text-align: right;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  z-index: 20; }
  .m-dialogue-btm .msg {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-right: 30px;
    vertical-align: middle; }
  .m-dialogue-btm .option-wrap {
    display: inline-block; }
    .m-dialogue-btm .option-wrap .m-btn, .m-dialogue-btm .option-wrap .m-label, .m-dialogue-btm .option-wrap .daterangepicker .btn, .daterangepicker .m-dialogue-btm .option-wrap .btn {
      margin-right: 8px; }

/* Drag N Drop style */
.m-drag-item {
  width: 100%;
  display: flex;
  align-items: stretch;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; }
  .m-drag-item .grip {
    padding: 0 5px;
    display: flex;
    align-items: center;
    cursor: grab; }
    .m-drag-item .grip .icon, .m-drag-item .grip .m-collapse .collapse-head .arrow, .m-collapse .collapse-head .m-drag-item .grip .arrow, .m-drag-item .grip .m-collapse .sub-head .arrow, .m-collapse .sub-head .m-drag-item .grip .arrow {
      color: rgba(0, 0, 0, 0.25);
      font-size: 20px;
      cursor: grab; }
    .m-drag-item .grip:hover {
      background: rgba(0, 0, 0, 0.03); }
      .m-drag-item .grip:hover .icon, .m-drag-item .grip:hover .m-collapse .collapse-head .arrow, .m-collapse .collapse-head .m-drag-item .grip:hover .arrow, .m-drag-item .grip:hover .m-collapse .sub-head .arrow, .m-collapse .sub-head .m-drag-item .grip:hover .arrow {
        color: rgba(0, 0, 0, 0.45); }
  .m-drag-item .m-collapse {
    width: 100%; }

/* Condition selector */
.condition-selector {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  cursor: pointer; }
  .condition-selector:after {
    content: "";
    width: 70px;
    height: inherit;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #ffffff 90%, #ffffff 100%); }
  .condition-selector .item, .condition-selector .grid-container .video-grid .m-row .text, .grid-container .video-grid .m-row .condition-selector .text {
    border: 1px solid #eaeaea;
    border-radius: 3px;
    padding: 2px 4px;
    margin-right: 5px;
    margin-bottom: 5px; }
    .condition-selector .item.flow-type, .condition-selector .grid-container .video-grid .m-row .flow-type.text, .grid-container .video-grid .m-row .condition-selector .flow-type.text {
      border: 1px solid #cccccc;
      background: #f2f2ff; }

.condition-panel {
  min-width: 60vw;
  padding: 20px;
  border: 2px solid #816CD999;
  box-sizing: border-box;
  position: absolute;
  top: 33px;
  background: #ffffff;
  border-radius: 0 8px 8px 8px;
  z-index: 2;
  user-select: none; }
  .condition-panel i {
    color: rgba(0, 0, 0, 0.65) !important; }
  .condition-panel .panel-section:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea; }
  .condition-panel .panel-section.flex {
    display: flex; }
    .condition-panel .panel-section.flex .section-blk:not(:last-child) {
      margin-right: 60px; }
  .condition-panel .sec-body .tag-frame {
    width: calc(100% / 4); }

/* 此專案需要的樣式 */
.top-menu .menu-name {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5); }

.top-menu .selected .menu-icon, .side-menu .menu-entry .top-menu .selected .next-icon, .top-menu .selected .menu-entry .next-icon, .top-menu .menu-entry .selected .next-icon {
  color: rgba(0, 0, 0, 0.02); }

.top-menu .selected .menu-name {
  color: rgba(0, 0, 0, 0.02); }

.top-menu .entry-package .menu-name {
  font-size: 16px;
  text-align: center; }

.msg-no-current-eval {
  top: 40%; }
  .msg-no-current-eval .pic {
    font-size: 50px;
    color: #816CD9; }
  .msg-no-current-eval .title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #816CD9; }
  .msg-no-current-eval select {
    border: 1px solid #816CD9; }

.dropzone .dz-preview .dz-progress {
  background: rgba(155, 155, 155, 0.2); }
  .dropzone .dz-preview .dz-progress .dz-upload {
    background: rgba(24, 189, 30, 0.9); }

.status-indicator {
  margin-right: 6px;
  vertical-align: middle; }
  .status-indicator .status-light {
    margin-right: 3px; }
    .status-indicator .status-light .bulb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.25);
      display: inline-block; }
      .status-indicator .status-light .bulb.normal {
        background: #39b55c; }
      .status-indicator .status-light .bulb.alarm {
        background: #d76161; }
      .status-indicator .status-light .bulb.notice {
        background: #f6ae41; }
      .status-indicator .status-light .bulb.partial {
        background: #86a9f7; }

/* Youtube影片播放器外框 */
.video-wrap {
  min-width: 70%;
  position: relative; }
  .video-wrap:hover #close_film:not(.fixed) {
    top: 140px; }
  .video-wrap #close_film:not(.fixed) {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -120%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 15px rgba(0, 0, 0, 0.15); }
  .video-wrap iframe {
    border-radius: 15px;
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9; }

/* 設定輪播幻燈片 */
@keyframes carousel-to-left {
  from {
    transform: translateX(-33.3%); }
  to {
    transform: translateX(0%); } }

@keyframes carousel-to-right {
  from {
    transform: translateX(-33.3%); }
  to {
    transform: translateX(-66.6%); } }

.m-carousel {
  width: 100%;
  height: 600px;
  overflow: hidden;
  border: 0px solid transparent;
  border-radius: 8px;
  position: relative;
  display: inline-flex; }
  .m-carousel .carousel-collection {
    height: 100%;
    display: inline-flex;
    transition: 1s;
    transform: translateX(-33.3%); }
    .m-carousel .carousel-collection.move-left {
      animation-name: carousel-to-left;
      animation-duration: 1s; }
    .m-carousel .carousel-collection.move-right {
      animation-name: carousel-to-right;
      animation-duration: 1s; }
  .m-carousel .carousel-item, .m-carousel .carousel-before,
  .m-carousel .carousel-after {
    width: 1000px;
    justify-content: center;
    display: none; }
    .m-carousel .carousel-item.current, .m-carousel .current.carousel-before,
    .m-carousel .current.carousel-after {
      display: flex; }
    .m-carousel .carousel-item:not(:last-child), .m-carousel .carousel-before:not(:last-child),
    .m-carousel .carousel-after:not(:last-child) {
      /*margin-right: 10px;*/ }
    .m-carousel .carousel-item .carousel-inner, .m-carousel .carousel-before .carousel-inner, .m-carousel .carousel-after .carousel-inner {
      display: block;
      overflow: hidden;
      border-radius: 8px;
      width: 100%;
      height: 100%; }
      .m-carousel .carousel-item .carousel-inner img, .m-carousel .carousel-before .carousel-inner img, .m-carousel .carousel-after .carousel-inner img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: inherit; }
  .m-carousel .carousel-before,
  .m-carousel .carousel-after {
    display: flex; }
  .m-carousel .carousel-control {
    position: absolute;
    height: 30px;
    width: 30px;
    top: calc(50% - 15px);
    z-index: 3;
    display: block;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    opacity: 0.5;
    transition: .2s ease-in-out; }
    .m-carousel .carousel-control i {
      color: #ffffffb0;
      font-size: 26px; }
    .m-carousel .carousel-control:hover {
      opacity: 1; }
    .m-carousel .carousel-control.btn-prev {
      left: 8px; }
    .m-carousel .carousel-control.btn-next {
      right: 8px; }
  .m-carousel .carousel-panel {
    position: absolute;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    bottom: 7%;
    opacity: 0.5;
    transition: .2s ease-in-out; }
    .m-carousel .carousel-panel:hover {
      opacity: 1; }
    .m-carousel .carousel-panel .btn-move {
      display: block;
      height: 10px;
      width: 10px;
      border-radius: 16px;
      margin: 0px 8px;
      cursor: pointer;
      transition: .5s;
      box-shadow: 0px 0px 1px #00000066;
      background: #ffffffb0; }
      .m-carousel .carousel-panel .btn-move.active {
        opacity: 1;
        background: #ffffff;
        width: 24px; }

/* Loading Animation */
.loading-circle {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background: #ffffffd1;
  z-index: 100; }
  .loading-circle:before {
    content: '';
    position: relative;
    width: 75px;
    height: 75px;
    border: 2px solid #0072ff;
    border-top-color: rgba(0, 0, 0, 0.2);
    border-right-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    animation: loading infinite 0.75s linear; }

@keyframes loading {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 1000; }
  .loading-spinner::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: #ffffff; }

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg); }
  to {
    transform: translate(-50%, -50%) rotate(360deg); } }

#entry {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box; }

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 限制顯示 i 行 */ }
  .text-ellipsis.line-1 {
    -webkit-line-clamp: 1; }
  .text-ellipsis.line-2 {
    -webkit-line-clamp: 2; }
  .text-ellipsis.line-3 {
    -webkit-line-clamp: 3; }
  .text-ellipsis.line-4 {
    -webkit-line-clamp: 4; }
  .text-ellipsis.line-5 {
    -webkit-line-clamp: 5; }
  .text-ellipsis.line-6 {
    -webkit-line-clamp: 6; }

.wide-wrap, .narrow-wrap {
  max-width: 100%;
  margin: 0 auto; }

.narrow-wrap {
  max-width: 1180px; }

/* 頁首 */
.header {
  width: 100%;
  height: 70px;
  background: #0000001A;
  padding: 10px calc((100% - 1180px) / 2);
  display: inline-flex;
  justify-content: space-between;
  align-items: center; }
  .header > .logo {
    display: flex;
    width: fit-content; }
    .header > .logo img {
      height: 50px;
      width: auto;
      object-fit: contain; }
  .header .tool {
    display: none; }

/* 頁尾 */
.footer {
  width: 100%;
  min-height: 120px;
  background: transparent;
  padding: 26px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  color: #ffffff; }

/* 導覽列 */
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: 16px; }
  .navbar .nav-opt {
    color: white;
    background: transparent; }
  .navbar hr {
    border: 1px solid #DDDDE2;
    height: 18px; }

/* 頁籤 */
.navigator {
  font-size: 14px;
  margin: 16px 0;
  display: inline-flex;
  flex-wrap: wrap;
  color: #ffffff; }
  .navigator .slash {
    margin: 0 8px; }
  .navigator .page {
    font-weight: bold;
    display: flex;
    cursor: pointer; }
    .navigator .page:hover {
      text-decoration: underline; }
    .navigator .page a {
      color: inherit; }

[class*="btn-"] {
  cursor: pointer; }

.search-icon, .portal-btn.search {
  background-size: contain;
  background-repeat: no-repeat;
  /*background-position: center center;*/
  background-image: url("../../../asset/images/icons/btn_search.png"); }

/* 外部網站入口按鈕 */
.portal-btn {
  display: block;
  width: 26px;
  height: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  /*background-position: center center;*/ }
  .portal-btn.fb {
    background-image: url("../../../asset/images/icons/media_fb.png"); }
  .portal-btn.X {
    background-image: url("../../../asset/images/icons/media_X.png"); }
  .portal-btn.line {
    background-image: url("../../../asset/images/icons/media_line.png"); }
  .portal-btn.ig {
    background-image: url("../../../asset/images/icons/media_ig.png"); }
  .portal-btn.link {
    background-image: url("../../../asset/images/icons/media_link.png"); }

.theme-icon {
  background-color: transparent; }
  .theme-icon img {
    height: 118px;
    width: auto; }

/* 內容區塊 */
.content {
  width: 100%;
  min-height: calc(100vh - 230px);
  display: inline-block;
  box-sizing: border-box;
  background: white; }
  .content .content-header {
    width: 100%;
    background: -webkit-linear-gradient(rgba(137, 124, 255, 0.4), rgba(137, 124, 255, 0) 80%), -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(145, 129, 214, 0.9) 75%); }
    .content .content-header .narrow-wrap {
      margin-bottom: 0 !important; }
  .content .content-body {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    /* 主要區塊 */
    /* 側邊欄 */ }
    .content .content-body .content-main {
      height: 100%;
      flex: 1 2 auto;
      display: flex;
      flex-direction: column;
      gap: 20px; }
      .content .content-body .content-main .banner {
        border-radius: 0 !important; }
    .content .content-body .content-sidebar {
      height: 100%;
      flex: 0 0 340px;
      display: flex;
      flex-direction: column;
      row-gap: 24px; }

.shadow-box {
  box-shadow: 0px 8px 24px 0px #45455033; }

.m-flexbox {
  width: 100%;
  display: inline-flex;
  gap: 20px; }
  .m-flexbox .m-flexbox-item.flex-0 {
    flex: 0; }
  .m-flexbox .m-flexbox-item.flex-1 {
    flex: 1; }
  .m-flexbox .m-flexbox-item.flex-2 {
    flex: 2; }
  .m-flexbox .m-flexbox-item.flex-3 {
    flex: 3; }
  .m-flexbox .m-flexbox-item.flex-4 {
    flex: 4; }
  .m-flexbox .m-flexbox-item.flex-5 {
    flex: 5; }
  .m-flexbox .m-flexbox-item.flex-6 {
    flex: 6; }
  .m-flexbox .m-flexbox-item.flex-7 {
    flex: 7; }
  .m-flexbox .m-flexbox-item.flex-8 {
    flex: 8; }
  .m-flexbox .m-flexbox-item.flex-9 {
    flex: 9; }
  .m-flexbox .m-flexbox-item.flex-10 {
    flex: 10; }

.title-text {
  font-size: 20px; }

.cont-text, .m-frame-list .m-tag {
  font-size: 16px; }

/* 圖框列表 */
.m-frame-list {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%; }
  .m-frame-list .fl-title {
    display: flex;
    align-items: center;
    font-weight: bolder;
    gap: 8px; }
    .m-frame-list .fl-title::before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #816CD9; }
    .m-frame-list .fl-title .title-text {
      display: flex;
      align-items: center;
      gap: 5px; }
  .m-frame-list .fl-content {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%; }

.frame-item {
  display: inline-flex;
  gap: 16px;
  width: 100%;
  height: fit-content;
  flex-direction: column;
  position: relative;
  padding: 16px 10px;
  box-sizing: border-box; }
  .frame-item .frame-img {
    flex: 1;
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16 / 9; }
    .frame-item .frame-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 保持圖片比例並填滿框架 */
      transition: transform 0.2s ease-in-out; }
    .frame-item .frame-img:hover img {
      transform: scale(1.2);
      /* 放大 1.2 倍 */ }
  .frame-item .frame-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 6px;
    margin: 16px 10px 0; }
    .frame-item .frame-content .cont-desc {
      width: 100%;
      letter-spacing: 1px;
      font-weight: bold;
      cursor: pointer;
      color: #000000CC; }
      .frame-item .frame-content .cont-desc:hover {
        text-decoration: underline; }
      .frame-item .frame-content .cont-desc a {
        color: inherit; }
    .frame-item .frame-content .cont-timestamp {
      font-size: 15px;
      color: #000000A6;
      margin-top: 5px; }
  .frame-item .frame-tag {
    border-radius: 8px;
    height: fit-content;
    width: fit-content;
    display: none;
    padding: 6px 8px;
    font-size: 16px; }
  .frame-item .frame-pin {
    position: absolute;
    top: 15px;
    right: 9px;
    display: block;
    width: 34px;
    height: 31px;
    background: url("../../../asset/images/icons/pin.png") no-repeat;
    background-size: contain;
    border-radius: 0 8px 0 0;
    /*opacity: .8;*/ }
    .frame-item .frame-pin.popular {
      top: 16px;
      right: unset;
      left: 10px;
      height: fit-content;
      width: fit-content;
      padding: 3px 6px;
      color: #ffffff;
      background: #b40000cc;
      border-radius: 8px 0 0 0; }
  .frame-item.horizontal {
    flex-direction: row;
    padding: 0;
    gap: 0; }
    .frame-item.horizontal .frame-content {
      margin: 0 0 0 10px; }
    .frame-item.horizontal .frame-img {
      border-radius: 0px;
      width: 50%;
      height: auto;
      aspect-ratio: 16 / 9;
      min-width: 137px;
      min-height: 90px; }
    .frame-item.horizontal .frame-tag {
      display: block !important; }
    .frame-item.horizontal .frame-pin {
      display: none !important; }
    .frame-item.horizontal .cont-timestamp {
      display: none !important; }

.banner {
  display: block;
  overflow: hidden;
  border-radius: 8px; }
  .banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit; }

.btn-top {
  position: fixed;
  width: 32px;
  height: 32px;
  bottom: 32px;
  right: 32px;
  background-image: url("../../../asset/images/icons/to-top.svg");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer; }

/* 限制容器的寬度，並設定 overflow 產生橫向滾動 */
.scroll-list {
  height: 300px;
  max-width: 100%;
  width: fit-content;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap; }
  .scroll-list .list-item {
    flex: 0 0 auto;
    margin: 25px 15px; }
    .scroll-list .list-item img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      border-radius: 8px !important; }

/* Toast 訊息樣式 */
.toast {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  transition: opacity 0.3s ease-in-out;
  z-index: 2; }