body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  height: 100%;
  font-family: Noto Sans TC,微軟正黑體,Microsoft JhengHei,文泉驛正黑,WenQuanYi Zen Hei,儷黑 Pro,LiHei Pro,sans-serif;
}

html {
  height: 100%;
}


/* 覆蓋 Smart Wizard 的紅色主題，將紅色變更為深紅色 */
:root {
  --sw-progress-width: 25%;
  --sw-border-color: #eeeeee;
  --sw-toolbar-btn-color: #ffffff;
  --sw-toolbar-btn-background-color: #BE0A09;
  --sw-anchor-default-primary-color: #f8f9fa;
  --sw-anchor-default-secondary-color: #b0b0b1;
  --sw-anchor-active-primary-color: #BE0A09;
  --sw-anchor-active-secondary-color: #ffffff;
  --sw-anchor-done-primary-color: #e46960;
  --sw-anchor-done-secondary-color: #fefefe;
  --sw-anchor-disabled-primary-color: #f8f9fa;
  --sw-anchor-disabled-secondary-color: #dbe0e5;
  --sw-anchor-error-primary-color: #dc3545;
  --sw-anchor-error-secondary-color: #ffffff;
  --sw-anchor-warning-primary-color: #ffc107;
  --sw-anchor-warning-secondary-color: #ffffff;
  --sw-progress-color: #f44336;
  --sw-progress-background-color: #f8f9fa;
  --sw-loader-color: #f44336;
  --sw-loader-background-color: #f8f9fa;
  --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon{
  /* border: solid 4px blue !important;
   */
   width: 16px;
   height: 16px;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{
  /* border: solid 4px blue !important;
   */
   width: 16px;
   height: 16px;
}

.ui-widget-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important; /* 例如：半透明黑色 */
  opacity: 0.8 !important; /* 調整透明度 */
}

#banner {
  background-color: #BE0A09;
  height: 96px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mswf-logo {
  height: 80px;
}

.pxpay-logo {
  margin-right: 20px;
  height: 64px;
}

#title_pxpay {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

#donation_form {
  margin-top: 1rem;
  width: 90%;
  min-width: 900px;
  max-width: 1024px;
  margin-bottom: 2rem;
}

.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-fields-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 0.5rem;  
  row-gap: 1rem;
  padding-bottom: 2rem;
}

#option_note {
  display: none;
  color: #b67719;
  border: solid 1px #b67719;
  background-color: #faf2c6;
  border-radius: 5px;
  padding: 8px 5px;
}

#option_note > span {
  display: inline-block;
}


.span2 {
  grid-column: span 2;
}

.span3 {
  grid-column: span 3;
}

.span4 {
  grid-column: span 4;
}

.span5 {
  grid-column: span 5;
}

.span6 {
  grid-column: span 6;
}

.field-set {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.field-set > label {
  font-size: 0.95rem;
  color: rgb(54, 54, 54);
  margin-bottom: 0.2rem;
}

input.text-field {
  font-size: 1.2rem;
  padding: 5px 10px;
  border-radius: 5px;
  border: solid 1px rgb(180, 180, 180);
  height: 2.4rem;
}

input.text-field:focus {
  outline: none;
}

input[type="number"] {
  text-align: right;
}

#num_amount {
  width: 8rem;
}

.btn-set-amount {
  height: 2.4rem;
  background-color: rgb(246, 215, 215);
  border: solid 1px rgb(190, 81, 81);
  border-radius: 5px;
  color: rgb(190, 81, 81);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
}


.btn-set-amount:hover {
  height: 2.4rem;
  background-color: rgb(211, 63, 63);
  border: solid 1px rgb(190, 81, 81);
  border-radius: 5px;
  color: rgb(246, 215, 215);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
}


.assistant-btn {
  height: 2.4rem;
  background-color: rgb(246, 215, 215);
  border: solid 1px rgb(190, 81, 81);
  border-radius: 5px;
  color: rgb(190, 81, 81);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 0.5rem;
}

.assistant-btn:hover {
  background-color: rgb(211, 63, 63);
  border: solid 1px rgb(190, 81, 81);
  border-radius: 5px;
  color: rgb(246, 215, 215);
}

.addr_container {
  display: flex;
  width: 99%;
}

.sel_district {
  margin: 0 0.3rem;
}

.form-fields-container {
  padding-bottom: 2rem;
}

#txt_note {
  width: 100%;
}

.sw-theme-arrows>.nav .nav-link {
  height: 36px;
  padding-left: 42px;
  padding-right: 0;
}

.sw>.nav .nav-link>.num {
  font-size: 28px;
}

.step-link-text {
  position: relative;
  min-width: 4.5rem;
  margin: 0;
  top: -5px;
}

.required-field-mark {
  margin-left: 0.3rem;
  color: red !important;
  font-size: 1.1rem;
}

.btn-submit {
  border: solid 1px rgba(150, 150, 150);
  color: rgb(56, 56, 56);
  background-color: #FFD100;
  height: 2.4rem;
  font-size: 1rem;
  font-weight: 900;
  border-radius: 5px;
  margin-left: 0.5rem;
  position: relative;
  top: 2px;
  cursor: pointer;
}

.btn-icon {
  position: relative;
  top: 4px;
  font-size: 1.3rem;
  margin-right: 5px;
}

.summary-container {
  display: grid;
  grid-template-columns: 9rem 1fr; /* 左邊欄位名稱 10rem，右邊值自動寬度 */
  gap: 0.8rem; /* 欄位之間的間距 */
  padding: 1rem;
}

.summary-row {
  display: contents; /* 讓 label 和 value div 成為 grid 的直接子元素 */
}

.summary-label {
  font-weight: bold;
  text-align: left;
}

.summary-value {
  text-align: left;
  font-size: 1.2rem;
}

.summary-separator {
  grid-column: span 2;
}

.na-value {
  color: #b0b0b1;
}

#privacy_confirm_container {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#slink_privacy_policy {
  cursor: pointer;
  text-decoration: underline;
  color: #a84c16;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0 3px;
}

@media screen and (min-width:641px) and (max-width: 980px) {



  #banner {
    height: 72px;
  }

  .mswf-logo {
    height: 60px;
  }

  .pxpay-logo {
    margin-right: 12px;
    height: 54px;
  }

  .form-fields-container {
    grid-template-columns: 0.9fr 0.9fr 0.9fr 1fr 1fr 1.2fr;
  }


  #donation_form {
    width: 95%;
    min-width: 600px;
    max-width: 940px;
  }

  .addr_container {
    flex-direction: column;
  }

  .addr_container > div {
    margin-bottom: 0.4rem;
  }

}

#pxpay_qrcode_container {
  position: relative;
  padding: 0;
}

#qrcodeImage {
  width: 200px;
}

#icon_pxpay_qrcode {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 80px;
  top: 80px;
}

.btn-agree {
  background-color: #BE0A09;
  color: white;
  font-weight: 600;
}

.btn-agree:hover {
  background-color:#d5493f;
  color: white;
  font-weight: 600;
}




#dialog_privacy_overlay {
  display: none; /* 預設隱藏 */
  position: fixed; /* 固定在視窗上，不會隨捲動 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
  z-index: 1000; /* 確保疊在其他元素之上 */
}


#dialog_privacy {
  display: none; /* 預設隱藏 */
  position: fixed; /* 固定在視窗上 */

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平和垂直置中 */
  background-color: white;
  padding: 0;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
  z-index: 1001; /* 確保疊在 overlay 之上 */
  width: 80%; /* 可以設定您想要的寬度 */
  max-width: 600px; /* 設定最大寬度 */
  min-width: 340px;
  height: 80vh; /* 設定高度為視窗高度的 80% */
  min-height: 300px; /* 設定最小高度為 300px */
  max-height: 640px;

  background-color: #f8ebf2;
   /* 當內容超出時，垂直方向出現捲動條 */
}


#dialog_privacy_layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.dialog_title {
  width: calc(100% - 20px);
  background-color: #e46960;
  font-family: 'Arial';
  font-weight: 500;
  font-size: 1.2rem;
  color: white;
  padding: 10px 0 0 20px;
  height: 36px;
  border-radius: 10px 10px 0 0;
}

#dialog-content {
  padding: 18px 12px;
  flex: 1;
  margin-bottom: 15px;
  overflow: auto;
  /* width: 100%; */
  width: calc(100% - 24px);
  background-color: white;
}

.isp4 {
  grid-column: span 4;
}

.isp3 {
  grid-column: span 3;
}

.isp2 {
  grid-column: span 2;
}

.article_item {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.article_with_items {
  /* padding: 8px 12px; */
  display: grid;
  grid-template-columns: 2.1rem 1.7rem 1.2rem 1fr;
  row-gap: 0.2rem;
  column-gap: 3px;
}

.article_with_items > div {
  font-size: 0.9rem;
  color: #585858;
  line-height: 1.6rem;
}

#dialog-buttons {
  width: 100%;
  height: 48px;
  text-align: right; /* 按鈕靠右對齊 */
  padding-right: 20px;
}

#dialog-buttons button {
  padding: 10px 15px;
  margin-left: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#btn-dialog-agree {
  background-color: #f44336;
  color: white;
  padding: 0;
}

#btn-dialog-deny {
  background-color: #b2e8ec;
  color: black;
}





@media screen and (max-height: 950px) and (max-width: 640px){
  .toolbar-bottom {
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
    background-color: rgba(250, 250, 250, 0.9);
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.5);
  }

  #donation_form {
    margin-bottom: 4.5rem;
  }

}

@media screen and (max-width: 640px) {

  .sw-btn-next{
    font-size: 1.15rem;
  }

  .sw-btn-prev{
    font-size: 1.15rem;
  }


  .btn-submit {
    font-size: 1.15rem;
  }

  #banner {
    height: 64px;
  }

  .mswf-logo {
    height: 48px;
  }

  .pxpay-logo {
    height: 36px;
    margin-right: 10px;
  }


  .assistant-btn {
    font-size: 0.9rem;
    font-weight: 100;
    margin-left: 0.3rem;
    margin-right: 0.2rem;
    min-width: 8rem;
  }


  .btn-set-amount {
    height: 2.4rem;
    background-color: rgb(246, 215, 215);
    border: solid 1px rgb(190, 81, 81);
    border-radius: 5px;
    color: rgb(190, 81, 81);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
  }

  
  .btn-set-amount:hover {
    font-size: 1.1rem;
  }
  

  .form-fields-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .span2 {
    grid-column: span 3;
  }

  .span4 {
    grid-column: span 3;
  }

  .span6 {
    grid-column: span 3;
  }

  #donation_form {
    width: 95%;
    min-width: 340px;
  }

  .addr_container {
    flex-direction: column;
  }

  .addr_container > div {
    margin-bottom: 0.4rem;
  }

  input.text-field {
    font-size: 1rem;
    padding: 5px 8px;
    border-radius: 4px;
    border: solid 1px rgb(180, 180, 180);
    height: 2.2rem;
  }

  .assistant-btn {
    font-size: 0.85rem;
    font-weight: 400;
    height: 2.2rem;
    margin-left: 0.3rem;
    margin-right: 0.2rem;
    min-width: 7.6rem;
  }

  #banner {
    height: 48px;
  }


  .summary-container {
    display: grid;
    row-gap: 0.5rem;
    grid-template-columns: 1fr; /* 左邊欄位名稱 10rem，右邊值自動寬度 */
  }
  
  .summary-label {
    color: rgb(110, 110, 110);
    font-weight: bold;
    font-size: 0.9rem;
    position: relative;
    top: 5px;
  }
  
  .summary-value {
    font-size: 1.25rem;
  }

  .na-value {
    font-size: 1.25rem;
  }

  .summary-separator {
    grid-column: span 1;
  }


  #dialog_privacy {
    width: 90%; /* 可以設定您想要的寬度 */
  }

}