@charset "UTF-8";
body {
  font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
  background-color: #eee; }

a {
  text-underline-offset: 10%; }

/* Go Top */
/* 按鈕 */
.resetBtn {
  background: none;
  border: none;
  padding: 2px; }

.btn {
  --bs-border-width: 1px;
  white-space: nowrap;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 16px; }
  @media all and (min-width: 992px) {
    .btn {
      padding: 6px 16px 3px 12px;
      font-size: 18px; } }

/* 外框線按鈕 */
.btn-outline-primary {
  --bs-btn-border-width: 2px;
  --bs-btn-color: #508DFC;
  --bs-btn-border-color: #508DFC;
  --bs-btn-hover-bg: #508DFC;
  --bs-btn-hover-border-color: #508DFC;
  --bs-btn-active-bg: #508DFC;
  --bs-btn-active-border-color: #508DFC;
  --bs-btn-disabled-color: #508DFC;
  --bs-btn-disabled-border-color: #508DFC;
  background-color: white; }

.btn-outline-success {
  --bs-btn-border-width: 2px;
  --bs-btn-color: #007368;
  --bs-btn-border-color: #007368;
  --bs-btn-hover-bg: #007368;
  --bs-btn-hover-border-color: #007368;
  --bs-btn-active-bg: #007368;
  --bs-btn-active-border-color: #007368;
  --bs-btn-disabled-color: #007368;
  --bs-btn-disabled-border-color: #007368;
  background-color: white; }

.btn-outline-danger {
  --bs-btn-border-width: 2px;
  --bs-btn-color: #F05471;
  --bs-btn-border-color: #F05471;
  --bs-btn-hover-bg: #F05471;
  --bs-btn-hover-border-color: #F05471;
  --bs-btn-active-bg: #F05471;
  --bs-btn-active-border-color: #F05471;
  --bs-btn-disabled-color: #F05471;
  --bs-btn-disabled-border-color: #F05471;
  background-color: white; }

/* 藥丸按鈕 */
.btn.rounded-pill {
  font-size: 16px;
  padding: 3px 12px 1px 10px; }

/* 按鈕color */
.btn-greenlake {
  --bs-btn-disabled-bg: #D9D9D9;
  --bs-btn-disabled-border-color: #D9D9D9;
  --bs-btn-disabled-color: white;
  background-color: #3DA4AB;
  color: white; }
  .btn-greenlake:hover {
    background-color: #32878d;
    color: white; }

.btn-greenlake_light {
  --bs-btn-disabled-bg: #D9D9D9;
  --bs-btn-disabled-border-color: #D9D9D9;
  --bs-btn-disabled-color: white;
  background-color: #97CBC6;
  color: #007368; }
  .btn-greenlake_light:hover {
    background-color: #7cbdb7;
    color: #007368; }

.btn-greenlake_light_light {
  --bs-btn-disabled-bg: #D9D9D9;
  --bs-btn-disabled-border-color: #D9D9D9;
  --bs-btn-disabled-color: white;
  background-color: #DFE8E7;
  color: #5D5D5D; }
  .btn-greenlake_light_light:hover {
    background-color: #c7d7d5;
    color: #5D5D5D; }

.btn-greenlake_dark {
  --bs-btn-disabled-bg: #D9D9D9;
  --bs-btn-disabled-border-color: #D9D9D9;
  --bs-btn-disabled-color: white;
  background-color: #007368;
  color: white; }
  .btn-greenlake_dark:hover {
    background-color: #004a43;
    color: white; }

/* 按鈕組 */
.GSMis-btn-group-action {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
  padding-top: 48px;
  padding-bottom: 24px; }
  .GSMis-btn-group-action .btn {
    width: 100%;
    max-width: 120px; }

/* 表格 */
/* 搜尋 */
/* 頁籤 */
/* Modal */
/* 區塊 */
/* Collapse */
/* 摺疊Collapse */
.GSMis-collapse-trigger {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 8px;
  font-size: 20px;
  font-weight: bold;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  color: currentColor !important;
  text-decoration: none !important;
  padding: 8px; }
  .GSMis-collapse-trigger i {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
  .GSMis-collapse-trigger.collapsed i {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg); }

.GSMis-collapse-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 4px 8px;
  color: white; }
  .GSMis-collapse-bar .badge {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 4px;
    height: 24px;
    min-width: 38px;
    border-radius: 999rem;
    background-color: white;
    color: #009788;
    font-size: 20px;
    font-weight: normal; }

/* Title */
/* 表單 */
/* 表單排列(水平) 最多4個單位 */
.GSMis-form-horizontal > * {
  margin: 0; }

.GSMis-form-horizontal > dt {
  margin-top: 16px;
  margin-bottom: 4px;
  color: #3E3E3E;
  font-weight: normal; }
  @media all and (min-width: 576px) {
    .GSMis-form-horizontal > dt {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -webkit-justify-content: end;
          -ms-flex-pack: end;
              justify-content: end;
      margin-left: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
      text-align: right;
      margin-left: 2rem; }
      .GSMis-form-horizontal > dt::after {
        content: "";
        display: block;
        height: 20px;
        margin-top: 2px;
        padding-left: 8px;
        margin-right: 8px; } }

@media all and (min-width: 576px) {
  .GSMis-form-horizontal {
    display: grid;
    grid-template-columns: repeat(1, auto 1fr);
    gap: 10px 4px; } }

@media all and (min-width: 576px) {
  .GSMis-form-horizontal.__gs-plaintext {
    gap: 0 4px; } }

.GSMis-form-horizontal.__gs-plaintext > dt {
  margin-top: 0;
  margin-bottom: 0; }

.GSMis-form-horizontal.__gs-plaintext > dd {
  margin-bottom: 0.375rem; }

@media all and (min-width: 768px) {
  .GSMis-form-horizontal.__gs-units-2, .GSMis-form-horizontal.__gs-units-3, .GSMis-form-horizontal.__gs-units-4 {
    grid-template-columns: repeat(2, auto 1fr); } }

@media all and (min-width: 992px) {
  .GSMis-form-horizontal.__gs-units-3, .GSMis-form-horizontal.__gs-units-4 {
    grid-template-columns: repeat(3, auto 1fr); } }

@media all and (min-width: 1200px) {
  .GSMis-form-horizontal.__gs-units-4 {
    grid-template-columns: repeat(4, auto 1fr); } }

.GSMis-form-horizontal.__gs-units-2 .__gs-col-wide, .GSMis-form-horizontal.__gs-units-3 .__gs-col-wide, .GSMis-form-horizontal.__gs-units-4 .__gs-col-wide {
  grid-column: 1; }
  .GSMis-form-horizontal.__gs-units-2 .__gs-col-wide + dd, .GSMis-form-horizontal.__gs-units-3 .__gs-col-wide + dd, .GSMis-form-horizontal.__gs-units-4 .__gs-col-wide + dd {
    grid-column: 2/-1; }

@media all and (min-width: 768px) {
  .GSMis-form-horizontal.__gs-units-2 .__gs-col-span, .GSMis-form-horizontal.__gs-units-3 .__gs-col-span, .GSMis-form-horizontal.__gs-units-4 .__gs-col-span {
    grid-column: 1; }
    .GSMis-form-horizontal.__gs-units-2 .__gs-col-span + dd, .GSMis-form-horizontal.__gs-units-3 .__gs-col-span + dd, .GSMis-form-horizontal.__gs-units-4 .__gs-col-span + dd {
      grid-column: span 3; } }

@media all and (min-width: 992px) {
  .GSMis-form-horizontal.__gs-units-2 .__gs-col-span, .GSMis-form-horizontal.__gs-units-3 .__gs-col-span, .GSMis-form-horizontal.__gs-units-4 .__gs-col-span {
    grid-column: auto; } }

/* 表單排列(垂直) 最多4個單位 */
.GSMis-form-vertical {
  display: grid;
  gap: 8px 16px;
  margin-bottom: 1rem; }
  .GSMis-form-vertical div.form-control {
    border-width: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(0, 151, 136, 0.25); }
  .GSMis-form-vertical .__gs-item > label {
    color: #007a9a;
    margin-bottom: 2px;
    font-weight: bold; }
  @media all and (min-width: 768px) {
    .GSMis-form-vertical .__gs-col-spanX2 {
      grid-column: span 2 !important; } }
  @media all and (min-width: 768px) {
    .GSMis-form-vertical .__gs-col-spanX3 {
      grid-column: span 2 !important; } }
  @media all and (min-width: 992px) {
    .GSMis-form-vertical .__gs-col-spanX3 {
      grid-column: span 3 !important; } }
  @media all and (min-width: 768px) {
    .GSMis-form-vertical.__gs-units-2 {
      grid-template-columns: repeat(2, 1fr); } }
  @media all and (min-width: 768px) {
    .GSMis-form-vertical.__gs-units-3 {
      grid-template-columns: repeat(2, 1fr); } }
  @media all and (min-width: 992px) {
    .GSMis-form-vertical.__gs-units-3 {
      grid-template-columns: repeat(3, 1fr); } }
  @media all and (min-width: 768px) {
    .GSMis-form-vertical.__gs-units-4 {
      grid-template-columns: repeat(2, 1fr); } }
  @media all and (min-width: 992px) {
    .GSMis-form-vertical.__gs-units-4 {
      grid-template-columns: repeat(3, 1fr); } }
  @media all and (min-width: 1200px) {
    .GSMis-form-vertical.__gs-units-4 {
      grid-template-columns: repeat(4, 1fr); } }

/* 多行label */
.GSMis-label-multi {
  margin-top: -5px;
  line-height: 1.1; }
  @media all and (min-width: 576px) {
    .GSMis-label-multi .__gs-break {
      display: block; } }

/* 隱藏欄位 */
[data-hide-group="head"][style*="display: none;"] ~ [data-hide-group="body"] {
  display: none; }

/* 全寬 */
.__gs-col-full {
  grid-column: 1/-1; }

/* 強制換行 */
.__gs-escape {
  grid-column: 1 !important; }

div.form-control {
  padding-left: 0;
  padding-right: 0; }

:root {
  --bs-border-color: #009788; }

/* ==表單類 */
/* Radio, Checkbox, Switch 色彩 */
.form-check-input:checked {
  border-color: #009788;
  background-color: #009788; }

/*form-switch 尺寸*/
.form-switch .form-check-input {
  width: 36px;
  height: 21px; }

.form-switch.form-switch-light .form-check-input {
  --bs-border-width: 0;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%233DA4AB'/%3e%3c/svg%3e"); }
  .form-switch.form-switch-light .form-check-input:checked {
    background-color: #DFE8E7; }

/* Boostrap的驗證 */
.form-control.is-valid .form-control:valid,
.was-validated .form-control:valid {
  border-color: #ced4da;
  background-image: none; }
  .form-control.is-valid .form-control:valid:focus,
  .was-validated .form-control:valid:focus {
    border-color: #86b7fe;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }

.form-control.is-valid .form-check-input:valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
  color: #212529; }

.form-control.is-valid .form-check-input:valid:valid,
.was-validated .form-check-input:valid:valid {
  border-color: rgba(0, 0, 0, 0.25); }
  .form-control.is-valid .form-check-input:valid:valid:checked,
  .was-validated .form-check-input:valid:valid:checked {
    background-color: #009788; }

.form-control.is-valid .form-select:valid,
.was-validated .form-select:valid {
  border-color: rgba(0, 0, 0, 0.25); }
  .form-control.is-valid .form-select:valid:not([multiple]):not([size]),
  .was-validated .form-select:valid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
    .form-control.is-valid .form-select:valid:not([multiple]):not([size]):focus,
    .was-validated .form-select:valid:not([multiple]):not([size]):focus {
      border-color: #86b7fe;
      -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
              box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }

/* 起訖日 */
.GSMis-durationX > * + * {
  margin-top: -1px; }
  @media all and (min-width: 576px) {
    .GSMis-durationX > * + * {
      margin-top: 0;
      margin-left: -1px; } }

.GSMis-durationX .start {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }
  @media all and (min-width: 576px) {
    .GSMis-durationX .start {
      border-radius: 0.25rem 0 0 0.25rem; } }

.GSMis-durationX .end {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }
  @media all and (min-width: 576px) {
    .GSMis-durationX .end {
      border-radius: 0 0.25rem 0.25rem 0; } }

.GSMis-durationX .input-group-text {
  border-radius: 0;
  border-width: 0px;
  background-color: transparent; }
  @media all and (min-width: 576px) {
    .GSMis-durationX .input-group-text {
      background-color: #e9ecef;
      border-width: 1px; } }

/* 日期輸入框 */
.GSMis-input-date {
  padding-right: 2.5rem;
  background: url(../img/icon-date.svg) no-repeat right 12px center;
  background-size: 18px; }
  .GSMis-input-date::-webkit-calendar-picker-indicator, .GSMis-input-date::-webkit-inner-spin-button {
    opacity: 0; }
  .GSMis-input-date.time {
    background-image: url(../img/icon-time.svg); }
  .GSMis-input-date.datetime {
    background-image: url(../img/icon-datetime.svg); }

/* 日期輸入框 group */
.GSMis-input-group-date {
  position: relative; }
  .GSMis-input-group-date .GSMis-input-date {
    border-top-right-radius: 0.325rem !important;
    border-bottom-right-radius: 0.325rem !important; }
  .GSMis-input-group-date .input-group-text {
    position: absolute;
    right: 0;
    height: 100%;
    opacity: 0; }

/* 起訖日 */
.GSMis-duration-container {
  container-type: inline-size; }

@container (min-width: 340px) {
  .GSMis-duration {
    display: inline-grid;
    grid-template-columns: auto 30px auto; } }

/* 搜尋框 */
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  right: -9px;
  width: 30px;
  height: 30px;
  background: url(../img/icon-r-times.svg) no-repeat center;
  background-size: 12px;
  opacity: .5; }

/* .readonly */
.readonly:disabled {
  border-color: transparent;
  background: none; }

/* checkbox的label */
.form-check-label {
  white-space: nowrap; }

/* Password眼睛icon */
.GSMis-password {
  position: relative; }
  .GSMis-password [data-toggle-password-input] {
    padding-right: 2rem !important; }
  .GSMis-password [data-toggle-password] {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1rem;
    height: 1rem;
    -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    color: var(--bs-secondary);
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" height="1rem" width="1rem" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 0 0 0 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 0 0 0-2.226C20.2 8 16.031 5.183 12 5.251Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M15.75 12A3.75 3.75 0 1 1 12 8.249 3.749 3.749 0 0 1 15.75 12Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" height="1rem" width="1rem" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 0 0 0 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 0 0 0-2.226C20.2 8 16.031 5.183 12 5.251Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M15.75 12A3.75 3.75 0 1 1 12 8.249 3.749 3.749 0 0 1 15.75 12Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>');
    background-color: currentColor;
    background-repeat: no-repeat; }
    .GSMis-password [data-toggle-password].pw-hidden {
      -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" width="1rem"><path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px" d="M2.78 21 21.53 3M9 19.05a9.91 9.91 0 0 0 3 .45c4.1.07 8.26-2.81 10.82-5.64a1.65 1.65 0 0 0 0-2.22 20.06 20.06 0 0 0-3.07-2.76M17.09 7.27A11.31 11.31 0 0 0 12 6c-4-.07-8.2 2.75-10.82 5.64a1.65 1.65 0 0 0 0 2.22 20 20 0 0 0 4.93 4"/><path d="M9 15.07a3.85 3.85 0 0 1 5.5-5.28M15.75 12.75h0A3.75 3.75 0 0 1 12 16.5" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/></svg>');
      mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" width="1rem"><path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px" d="M2.78 21 21.53 3M9 19.05a9.91 9.91 0 0 0 3 .45c4.1.07 8.26-2.81 10.82-5.64a1.65 1.65 0 0 0 0-2.22 20.06 20.06 0 0 0-3.07-2.76M17.09 7.27A11.31 11.31 0 0 0 12 6c-4-.07-8.2 2.75-10.82 5.64a1.65 1.65 0 0 0 0 2.22 20 20 0 0 0 4.93 4"/><path d="M9 15.07a3.85 3.85 0 0 1 5.5-5.28M15.75 12.75h0A3.75 3.75 0 0 1 12 16.5" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/></svg>'); }
  .was-validated .GSMis-password .form-control:invalid {
    padding-right: 3.5rem !important;
    background-position: right calc(0.375em + 0.1875rem + 1.5rem) center !important; }

.GSMis-form-row {
  --bs-gutter-y: 1.5rem;
  --bs-gutter-x: 1rem;
  margin-bottom: 24px; }

/* Forms =============================== */
/* ==Sumoselect */
.SumoSelect {
  width: 100%; }
  .SumoSelect:hover, .SumoSelect:focus {
    -webkit-box-shadow: none;
            box-shadow: none; }

.SumoSelect .select-all.partial > span i,
.SumoSelect .select-all.selected > span i,
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
  background-color: #009788; }

.SumoSelect > .CaptionCont {
  height: 38px;
  border-color: #009788;
  border-radius: 0.25rem; }

.SumoSelect > .CaptionCont > span.placeholder {
  color: black !important;
  background-color: transparent !important; }

.SumoSelect .select-all {
  height: 38px; }

.SumoSelect .select-all.partial > span i {
  background-color: #ccc; }

.SumoSelect > .CaptionCont > span.placeholder {
  color: #4a4a4a;
  font-style: normal; }

/* checkbox大尺寸 */
.form-check-input-lg {
  width: 22px;
  height: 22px; }

/* Bootstrap reset */
.form-select,
.form-control {
  border-radius: 4px;
  --bs-border-width: 1px; }

.form-check-input {
  --bs-border-width: 1px; }

/* form-label */
.form-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  color: #009788;
  margin-bottom: 4px;
  margin-left: 4px; }
  .form-label::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999rem;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    background-color: #009788;
    margin-right: 6px; }

/* input-group */
.input-group .btn {
  --bs-btn-border-color: #009788; }
  .input-group .btn:disabled {
    --bs-btn-disabled-border-color: #009788;
    --bs-btn-disabled-opacity: 1
        ; }

/* input-group-text */
.input-group-text {
  background-color: #97CBC6;
  color: black;
  border-radius: 3px; }

/* 有資訊說明的表單驗證 */
.has-info-validation {
  position: relative; }
  .has-info-validation .invalid-feedback {
    position: absolute;
    top: 38px; }

/* 表單驗證 */
.was-validated {
  --bs-danger-text: #DC3545;
  --bs-success-text: #198754; }

/*
    表單驗證說明：
        - 驗證成功：預設為不顯示任何狀態
        - 驗證失敗：顯示紅色狀態
        - 需要驗證成功的反饋需加驗證成功的獨立class，即.GSMis-validation-valid
*/
/* 驗證成功獨立class  .GSMis-validation-valid*/
.GSMis-validation-valid.form-control.is-valid,
.was-validated .GSMis-validation-valid.form-control:valid {
  border-color: var(--bs-success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); }

/* 密碼眼睛icon */
[data-toggle-password]:before {
  background-color: currentColor;
  content: "";
  height: 1rem;
  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"%3E%3Cpath d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" /%3E%3Cpath d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" /%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"%3E%3Cpath d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" /%3E%3Cpath d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" /%3E%3C/svg%3E');
  width: 1rem; }

[data-toggle-password].pw-hidden:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye-slash' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye-slash' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E"); }

/*input-group去框線*/
.GSMis-input-group-merge {
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
  .GSMis-input-group-merge > .form-control:first-child {
    border-right-width: 0; }
  .GSMis-input-group-merge > .form-control:last-child {
    border-left-width: 0; }
  .GSMis-input-group-merge > .form-control:not(:first-child):not(:last-child) {
    border-left-width: 0;
    border-right-width: 0; }
  .GSMis-input-group-merge > .form-control:focus {
    -webkit-box-shadow: none;
            box-shadow: none; }
  .GSMis-input-group-merge > .input-group-text {
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; }
    .GSMis-input-group-merge > .input-group-text:first-child {
      border-right-width: 0; }
    .GSMis-input-group-merge > .input-group-text:last-child, .GSMis-input-group-merge > .input-group-text:not(:first-child):not(:last-child) {
      border-left-width: 0; }
  .GSMis-input-group-merge:focus-within > .form-control,
  .GSMis-input-group-merge:focus-within > .input-group-text {
    border-color: #86b7fe; }
  .GSMis-input-group-merge:focus-within {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: .375rem; }

/*input-group去框線 - 驗證失敗狀態*/
.GSMis-input-group-merge .form-control.is-invalid ~ button,
.was-validated .GSMis-input-group-merge .form-control:invalid ~ button {
  border-color: var(--bs-danger); }

/* input-group-merge 驗證失敗 */
.GSMis-input-group-merge .form-control:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important; }

.GSMis-input-group-merge:focus-within .form-control.is-invalid,
.GSMis-input-group-merge:focus-within .form-control:invalid {
  -webkit-box-shadow: none;
          box-shadow: none; }

.GSMis-input-group-merge:focus-within .form-control.is-valid,
.GSMis-input-group-merge:focus-within .form-control:valid {
  -webkit-box-shadow: none;
          box-shadow: none; }

/* input group的標題 */
[data-gs-input-group-label] {
  position: relative; }
  [data-gs-input-group-label]::before {
    content: attr(data-gs-input-group-label);
    position: absolute;
    top: -26px;
    white-space: nowrap; }

.input-group [data-gs-input-group-label]:first-child + .form-control {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important; }

/* Scroll */
.scroll {
  overflow: auto; }
  .scroll::-webkit-scrollbar {
    width: 6px; }
  .scroll::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 100px;
    -webkit-transition: all .5s;
    transition: all .5s; }
  .scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    background-clip: content-box;
    border-radius: 100px; }
  .scroll:hover::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05); }

/* Grid */
.auto-1fr {
  grid-template-columns: auto 1fr; }

/* 圖台 */
/*.map {
  background: url(../img/bg-map.png) no-repeat center;
  background-size: 2000px; }*/

.map-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px; }

.map-nav-wrapper {
  position: absolute;
  top: 5px;
  left: 10px; }

.map-nav-link {
  border: none;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 70px;
  height: 70px;
  padding-top: 46px;
  padding-bottom: 2px;
  color: #009788;
  font-size: 14px;
  border-radius: 6px;
  background: #DFE8E7 center top 9px no-repeat;
  -webkit-transition: all .2s;
  transition: all .2s; }
  .map-nav-link:nth-child(1) {
    background-image: url(../img/map-nav-01.svg); }
  .map-nav-link:nth-child(2) {
    background-image: url(../img/map-nav-02.svg); }
  .map-nav-link:nth-child(3) {
    background-image: url(../img/map-nav-03.svg); }
  .map-nav-link:nth-child(4) {
    background-image: url(../img/map-nav-04.svg); }
  .map-nav-link:nth-child(5) {
    background-image: url(../img/map-nav-05.svg); }
  .map-nav-link:hover, .map-nav-link.active {
    background-color: #009788;
    color: #FFE400; }
    .map-nav-link:hover:nth-child(1), .map-nav-link.active:nth-child(1) {
      background-image: url(../img/map-nav-01--active.svg); }
    .map-nav-link:hover:nth-child(2), .map-nav-link.active:nth-child(2) {
      background-image: url(../img/map-nav-02--active.svg); }
    .map-nav-link:hover:nth-child(3), .map-nav-link.active:nth-child(3) {
      background-image: url(../img/map-nav-03--active.svg); }
    .map-nav-link:hover:nth-child(4), .map-nav-link.active:nth-child(4) {
      background-image: url(../img/map-nav-04--active.svg); }
    .map-nav-link:hover:nth-child(5), .map-nav-link.active:nth-child(5) {
      background-image: url(../img/map-nav-05--active.svg); }

.map-panel {
  position: absolute;
  top: 5px;
  left: 87px;
  width: 320px; }
  .map-panel-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    padding: 5px 12px;
    color: #009788;
    background-color: white; }
    @media all and (min-width: 768px) {
      .map-panel-header {
        padding: 10px 12px;
        font-size: 20px;
        color: white;
        border-radius: 6px 6px 0 0;
        background-color: #009788; } }
    .map-panel-header .icon img {
      width: 25px; }
    .map-panel-header .title {
      padding-top: 2px; }
  .map-panel-body {
    background-color: white;
    height: calc(100vh - 170px); }
    @media all and (min-width: 768px) {
      .map-panel-body {
        border-radius: 0 0 6px 6px; } }
  .map-panel-link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: #009788;
    background: none;
    border: none;
    font-weight: bold;
    font-size: 22px; }
    @media all and (min-width: 768px) {
      .map-panel-link {
        color: white; } }

.todoList {
  -webkit-transform: translateY(468px);
      -ms-transform: translateY(468px);
          transform: translateY(468px);
  -webkit-transition: all .2s;
  transition: all .2s; }
  @media all and (min-width: 768px) {
    .todoList {
      -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
              transform: translateY(0); } }
  .todoList.full {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }

.card-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #DFE8E7;
  border-radius: 4px;
  font-size: 16px;
  color: #007368; }
  .card-label::before {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    content: '';
    display: block;
    width: 8px;
    border-radius: 4px 0 0 4px;
    background-color: #007368; }
  .card-label-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    padding: 8px;
    width: 100%; }
  .card-label-title {
    white-space: nowrap;
    font-weight: bold; }
  .card-label-data {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: end;
        -ms-flex-align: end;
            align-items: end;
    gap: 6px;
    line-height: 1;
    padding-right: 8px; }
    .card-label-data .focus {
      font-size: 20px;
      color: #508DFC;
      font-weight: bold; }
  .card-label-purple {
    color: #9285E2; }
    .card-label-purple::before {
      background-color: #9285E2; }

.bubble-panel {
  background-color: white;
  border-radius: 8px; }
  .bubble-panel-header {
    padding: 0 20px;
    padding-right: 10px;
    text-align: right; }
    .bubble-panel-header.js-handle {
      cursor: -webkit-grab;
      cursor: grab; }
  .bubble-panel-body {
    padding: 20px;
    padding-top: 0; }
  .bubble-panel .btnClose {
    padding: 10px;
    background: none;
    border-width: 0;
    font-size: 19px;
    color: #5D5D5D;
    line-height: 1; }

.pathway-list .item:last-child .dotPath span {
  display: none; }

.pathway-list .item:last-child .right {
  border-width: 0; }

.pathway-list .item + .item {
  margin-top: 10px; }

.pathway-list .head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.pathway-list .body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .pathway-list .body .dotPath {
    width: 30px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0; }
  .pathway-list .body .right {
    width: calc(100% - 30px);
    padding-top: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cbcbcb; }

.pathway-list .icon-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  color: #5D5D5D;
  font-size: 29px; }
  .pathway-list .icon-wrap .num {
    position: absolute;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px; }

/* 虛線箭頭 */
.dotPath {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  .dotPath span {
    position: relative;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    height: 100%;
    width: 1px;
    border-right: 2px dotted #5D5D5D; }
    .dotPath span::after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 11px 4px 0 4px;
      border-color: #5D5D5D transparent transparent transparent;
      left: -3px;
      bottom: -4px; }

.player {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 20px;
  padding: 20px 15px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.9);
  color: white; }
  .player-btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    padding: 0;
    background-color: #009788;
    color: white;
    border: 2px solid white;
    font-size: 12px; }
  .player .progress {
    --bs-progress-border-radius: 999rem;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.2); }

/* 其他 */
/*船舶動態*/
.map-panel.ship .scroll-1 {
  height: calc(100vh - 418px); }

.map-panel.ship .scroll-2 {
  height: calc(100vh - 464px); }

.map-panel.ship.isOpen .scroll-1 {
  /* 船舶動態的搜尋區打開 */
  height: calc(100vh - 773px); }

.map-panel.ship.isOpen .scroll-2 {
  /* 船舶動態的搜尋區打開 */
  height: calc(100vh - 818px); }

.map-panel.ship .collapseOpened:has(.collapse.show) {
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px; }

/* grid-title-body */
.grid-title-body {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 8px;
  background-color: rgba(223, 232, 231, 0.4); }
  .grid-title-body .title,
  .grid-title-body .body {
    padding: 4px 0;
    border-bottom: 1px solid #97CBC6; }
    .grid-title-body .title:nth-last-child(1), .grid-title-body .title:nth-last-child(2),
    .grid-title-body .body:nth-last-child(1),
    .grid-title-body .body:nth-last-child(2) {
      border-bottom-width: 0; }
  .grid-title-body .title {
    padding-right: 12px; }

/* Header */
.h1 {
  font-size: 40px;
  font-weight: bold; }

.h2 {
  font-size: 32px;
  font-weight: bold; }

.h3 {
  font-size: 28px;
  font-weight: bold; }

.h4 {
  font-size: 24px;
  font-weight: bold; }

.h5 {
  font-size: 20px;
  font-weight: bold; }

.h6 {
  font-size: 16px;
  font-weight: bold; }

/* Margin */
.mt-n1 {
  margin-top: -0.25rem !important; }

.mb-n1 {
  margin-bottom: -0.25rem !important; }

.ms-n1 {
  margin-left: -0.25rem !important; }

.me-n1 {
  margin-right: -0.25rem !important; }

.mt-n2 {
  margin-top: -0.5rem !important; }

.mb-n2 {
  margin-bottom: -0.5rem !important; }

.ms-n2 {
  margin-left: -0.5rem !important; }

.me-n2 {
  margin-right: -0.5rem !important; }

.mt-n3 {
  margin-top: -1rem !important; }

.mb-n3 {
  margin-bottom: -1rem !important; }

.ms-n3 {
  margin-left: -1rem !important; }

.me-n3 {
  margin-right: -1rem !important; }

.mt-n4 {
  margin-top: -1.5rem !important; }

.mb-n4 {
  margin-bottom: -1.5rem !important; }

.ms-n4 {
  margin-left: -1.5rem !important; }

.me-n4 {
  margin-right: -1.5rem !important; }

.mt-n5 {
  margin-top: -3rem !important; }

.mb-n5 {
  margin-bottom: -3rem !important; }

.ms-n5 {
  margin-left: -3rem !important; }

.me-n5 {
  margin-right: -3rem !important; }

.mb-20 {
  margin-bottom: 20px; }

.mb-40 {
  margin-bottom: 40px; }

.mb-60 {
  margin-bottom: 60px; }

.mb-80 {
  margin-bottom: 80px; }

/* Bg */
.bg-yellow_dark {
  background-color: #F8B564 !important;
  color: white !important; }

.bg-brown_light {
  background-color: #976E3D !important;
  color: white !important; }

.bg-brown_dark {
  background-color: #5B4225 !important;
  color: white !important; }

.bg-greenlake {
  background-color: #009788 !important;
  color: white !important; }

.bg-greenlake_dark {
  background-color: #007368 !important;
  color: white !important; }

.bg-greenlake_dark_dark {
  background-color: #004C45 !important;
  color: white !important; }

.bg-blue {
  background-color: #508DFC !important;
  color: white !important; }

.bg-button {
  background-color: #3DA4AB !important;
  color: white !important; }

.bg-purple {
  background-color: #9285E2 !important;
  color: white !important; }

.bg-greenlake_light {
  background-color: #97CBC6 !important; }

.bg-greenlake_light_light {
  background-color: #DFE8E7 !important; }

.bg-yellow_dark-50 {
  background-color: #f5dbb1 !important; }

.bg-brown_light-50 {
  background-color: #c7b89e !important; }

.bg-brown_dark-50 {
  background-color: #aaa192 !important; }

.bg-grey_light {
  background-color: #D9D9D9 !important; }

/* 框線 */
.border-greenlake {
  border-color: #009788 !important; }

.border-greenlake_light {
  border-color: #97CBC6 !important; }

.border-greenlake_light_light {
  border-color: #DFE8E7 !important; }

.border-button {
  border-color: #3DA4AB !important; }

.border-white {
  border-color: white !important; }

/* 文字 */
.text-greenlake {
  color: #009788 !important; }

.text-greenlake_dark {
  color: #007368 !important; }

.text-greenlake_light {
  color: #97CBC6 !important; }

.text-danger {
  color: #F05471 !important; }

.text-grey {
  color: #5D5D5D !important; }

.text-yellow_dark {
  color: #F8B564 !important; }

.text-brown_light {
  color: #976E3D !important; }

.text-brown_dark {
  color: #5B4225 !important; }

.text-brown {
  color: #C5895A !important; }

.text-blue {
  color: #508DFC !important; }

.text-sea {
  color: #28C0FF !important; }

.text-green {
  color: #349672 !important; }

.text-purple {
  color: #6E63FC !important; }

.text-purple_dark {
  color: #37329D !important; }

.text-navy {
  color: #006CFF !important; }

.text-orange {
  color: #FF9B5E !important; }

.text-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.fs-12 {
  font-size: 12px !important; }

.fs-14 {
  font-size: 14px !important; }

.fs-16 {
  font-size: 16px !important; }

.fs-18 {
  font-size: 18px !important; }

.fs-19 {
  font-size: 19px !important; }

.fs-20 {
  font-size: 20px !important; }

.fs-22 {
  font-size: 22px !important; }

.fs-24 {
  font-size: 24px !important; }

/* 旋轉 */
.rotate-90 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }

.rotate-180 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }

/* 陰影 */
.shadow-down {
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  src: url(../fonts/NotoSansTC-Regular.otf);
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NotoSansTC-Light.otf);
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NotoSansTC-Medium.otf);
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NotoSansTC-Bold.otf);
  font-display: swap; }

/*# sourceMappingURL=gsmis.css.map */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    height: 50px;
    margin: 0;
    padding: 0 8px;
    color: #000;
    list-style: none;
    border-radius: 6px;
    border: 1px solid #5D5D5D;
    line-height: 1;
}

@media all and (min-width: 768px) {
    .card-grid-item {
        height: 58px;
        gap: 5px;
    }
}

.card-grid-item.active {
    border-color: #007368;
    background-color: #007368;
    color: white;
}

.card-grid-title {
    font-size: 14px;
}

@media all and (min-width: 768px) {
    .card-grid-title {
        font-size: 16px;
    }
}

.card-grid-data {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 19px;
    color: white;
    font-size: 12px;
    border-radius: 6px;
}

@media all and (min-width: 768px) {
    .card-grid-data {
        height: 22px;
        font-size: 16px;
    }
}

.card-grid-item:nth-of-type(1) .card-grid-data {
    background-color: #9285E2;
}

.card-grid-item:nth-of-type(2) .card-grid-data {
    background-color: #F8B564;
}

.card-grid-item:nth-of-type(3) .card-grid-data {
    background-color: #508DFC;
}

.card-grid-item:nth-of-type(4) .card-grid-data {
    background-color: #976E3D;
}

.card-grid-item:nth-of-type(5) .card-grid-data {
    background-color: #F05471;
}

.card-grid-item:nth-of-type(6) .card-grid-data {
    background-color: #4D3CB7;
}

.card-grid-data .focus {
    font-size: 16px;
    font-weight: bold;
}

@media all and (min-width: 768px) {
    .card-grid-data .focus {
        font-size: 20px;
    }
}

.card-label {
    display: flex;
    background-color: #DFE8E7;
    border-radius: 4px;
    font-size: 16px;
}

    .card-label::before {
        flex-shrink: 0;
        content: "";
        display: block;
        width: 8px;
        border-radius: 4px 0 0 4px;
        background-color: #007368;
    }

.card-label-inner {
    display: flex;
    gap: 10px;
    padding: 8px;
    width: 100%;
}

.card-label-title {
    color: #007368;
    white-space: nowrap;
}

.card-label-data {
    color: #000;
    display: flex;
    align-items: end;
    gap: 6px;
    line-height: 1;
    padding-right: 8px;
}

    .card-label-data .focus {
        font-size: 20px;
        color: #508DFC;
        font-weight: bold;
    }

/* 資料表格 */
.data-table {
    --bs-table-border-color: #DFE8E7;
    --bs-table-hover-bg: #DFE8E7;
}

.data-table .table-dark {
    --bs-table-bg: #007368;
    --bs-table-border-color: #007368;
}

.GSMis-tabs-rect {
    --bs-nav-link-color: #5D5D5D;
    --bs-nav-link-hover-color: #5D5D5D;
    --bs-nav-pills-link-active-bg: #007368;
}

.GSMis-tabs-rect .nav-link {
    padding: 0;
    position: relative;
    z-index: 2;
    display: block;
    padding: 2px 4px;
    min-height: 26px;
    border-radius: 0;
    border-width: 0;
    font-size: 14px;
}

.GSMis-tabs-rect .nav-link.active {
    background-color: var(--bs-nav-pills-link-active-bg);
    border-color: white;
    font-weight: normal;
}

.tblPort tbody tr {
    cursor: pointer;
}