@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700,900");

body.frontend #footer {
  display: block;
  padding: 0;
  overflow: inherit;
}
.neticrm-footer {
  display: none;
}
body.frontend .limiter {
  width: 100%;
}
iframe.cet-civicrm-event-petition-iframe {
  width: 100%;
  border: 0;
}
@media screen and (min-width: 1024px) {
  .frontend .main#main {
    min-height: 100vh;
  }
}

/* Copy from origin petition css*/
.crm-container .crm-form-textfield {
  display: block;
}
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700,900");
html {
  font-size: 16px;
}
/* 2026-09-02 #46234 移除：@media (min-width:1600px){html{font-size:24px}}
   D7 移植時原樣帶入，但舊站連署頁並無此行為（舊站只載入 contribution_page.css，
   在 1689px 視窗下實測根字級為 16px）。這條會讓 >=1600px 的視窗把根字級拉到 24px，
   CRM 表單以 em/rem 計算的間距全部放大 1.5 倍 —— 白卡高度 777 -> 1069（+292px），
   即 neema note-29「欄位間距與整個區塊間距差異較大」的根因。 */
body,
button,
input,
a,
p,
h1,
h2,
h3,
h4,
h5,
span,
label {
  font-family: "Noto Sans TC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
}
.btn {
  font-size: 16px;
}
:root {
  --active-color: #4b9d95;
  --marked-color: #d79142;
}
.header {
  display: none;
}

/* override glazed start*/

.error-msg-bg {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.error-msg {
  position: absolute;
  background: white;
  padding: 50px;
  border-radius: 0.625rem;
  z-index: 100;
  cursor: default;
}
.error-msg a.button {
  display: inline-block;
  cursor: pointer;
  margin: .5em 1em .5em 0;
  padding: 0.375rem 0.625rem;
  font-size: .9375rem;
  line-height: 1.2;
  color: #fff;
  border: none;
  border-radius: 0;
  background-color: #333;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}


/* global */

span, a, p, h1, h2, h3, h4, h5, input {
  font-family: "Noto Sans TC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
}
.content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}



/* Structure */

.frontend #main.main {
  max-width: 1140px;
  width: auto;
  padding-left: 14px;
  padding-right: 14px;
  display: flex;
}
.frontend #main > #main-inner {
  margin-top: 0;
   border-radius: 5px;
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
}
body.special-page-finish #intro_text {
   max-width: 31.25rem;
}

@media (min-width: 992px) {
  .frontend #main > #main-inner {
    width: 40%;
  }
  body .crm-container {
    width: 390px;
  }
}
@media (max-width: 992px) {
  .frontend #main.main {
    margin-top: 0;
    flex-wrap: wrap-reverse;
    justify-content: center;
  }
  .frontend #main > #main-inner {
    margin-top: 160px;
  }
  #content-main {
    min-height: initial;
  }
  body.special-page-finish #intro_text {
    margin-top: 80px;
    margin-bottom: 180px; 
  }
  #footer_text {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
  }
  #footer_text>p {
    text-align: center;
  }
}

#intro_text p {
  font-family: "Noto Sans TC", "Hiragino Sans GB", "STHeiti","Microsoft YaHei", sans-serif;
  margin-bottom: 10px;
  line-height: 1.6em;
  /* font-size: 1em; */
  font-size: 16px;
}


@media (min-width: 992px) {
  body.frontend .main #content-header+#content-main {
    padding-top: .3125rem;
    max-width:unset;
  }
  .frontend #main.main {
    padding-top: 10.9375rem;
  }
}


/* blockes */

body .crm-container .event-info-header .event_summary-section {
  background: none;
  line-height: 1.33;
  font-weight: 900;
  font-size: 2.375rem;
  text-align: center;
  color: var(--marked-color);
  font-family: "Noto Sans TC", "Hiragino Sans GB", "STHeiti","Microsoft YaHei", sans-serif;
}
body #wizard-steps {
    display: none;
}
body .msg-event-full {
    display: none;
}

body .crm-container .crm-section {
  margin-bottom: .625rem;
}
body .crm-section {
  margin-bottom: 5px;
}
body .crm-container fieldset {
  margin-bottom: 0;
  padding: 0;
}
body .crm-container .event-info-header .event_summary-section {
  margin-bottom: 0;
}
body.frontend .crm-container fieldset legend {
  display: none;
}
#footer_text img {
  max-width: 18.75rem;
}

/* blockes - thankyou */
body .crm-container #ThankYou .event_info-group, 
body .crm-container #ThankYou .participant_role-group, 
body .crm-container #ThankYou .header-dark:not(.appear), 
body .crm-container #ThankYou .event_info_link-section {
  display: none;
}

/* elements */
#main h1.page-title {
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 3px 3px 6px #333;
  font-size: 3.25rem;
  text-align: justify;
  font-family: "Noto Sans TC", "Hiragino Sans GB", "STHeiti","Microsoft YaHei", sans-serif;
}
@media (max-width: 992px) {
  #main h1.page-title {
    margin-bottom: 4rem;
  }
}
body .crm-container-md .crm-form-elem input[type="text"],
body .crm-container-md .crm-form-elem input[type="text"]:hover,
body .crm-container-md .crm-form-elem input[type="text"]:focus,
body .crm-container-md .crm-form-elem input.form-text, 
body .crm-container-md .crm-form-elem input.form-text:hover, 
body .crm-container-md .crm-form-elem input.form-text:focus, 
body .crm-container-md .crm-form-elem select, 
body .crm-container-md .crm-form-elem select.form-select {
  height: 25px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--active-color);
}

body .cta-btn {
  border: 1px solid var(--marked-color);
  margin: 0;
}
body .cta-btn:hover ,
body .crm-event-thankyou-form-block .cta-btn{
  background-color: var(--marked-color);
  color: white;
}

html body .crm-container .crm-section>.label {
  color: var(--active-color);
}
body .crm-section .content .crm-form-elem input[type="text"],
body .crm-container-md .crm-form-elem select, 
body .crm-container-md .crm-form-elem select.form-select {
  border: 1px solid var(--marked-color) !important;
  border-radius: 5px !important;
  height: 40px;
  padding: 0 10px;
  width: 100%;
}
@media screen and (max-width: 992px){
  body .crm-container-md .crm-form-textfield, 
  body .crm-container-md .crm-form-file, 
  body .crm-container-md .crm-form-select, 
  body .crm-container-md .crm-form-textarea {
      width: 100%;
      display: block;
  }
}

body .crm-section.birth_date-section .crm-clear-link{
  display: none;
}
body .crm-container-md .crm-form-elem.dateplugin::after {
  content: "";
  margin-top: 3px;
}
.custom_109-section>.label {
  display: none;
}
.error-msg-bg .error-msg {
  max-width: 800px;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 992px) {
  .error-msg-bg .error-msg {
    max-width: 90%;
    padding: 20px;
    left: 5%;
    transform: translateY(-50%);
  }
}

.phone-Primary-2-section input[type="text"] {
  max-width: initial !important;
}
.crm-section.birth_date-section .crm-form-select-single {
  width: 100%;
  height: 1.5em;
}
body #crm-container.crm-container-md .crm-form-elem::after {
  top: 15px;
}

/* elements - progressbar */
body .crm-container .progress-bar-wrapper {
  border-radius: 15px;
}
body .crm-container .progress-block {
  margin-bottom: 0;
}
body .crm-container .progress-bar {
  background: var(--marked-color);
  border-radius: 15px;
  box-shadow: none;
}
body .crm-container .progress-amount {
  justify-content: flex-end;
}
body .crm-container .progress-amount-goal, 
body .crm-container .progress-amount-goal span {
  color: var(--active-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.29em;
}

body .crm-container input.form-submit,
body .contrib-step-1 .crm-button-type-upload a {
  background-color: var(--active-color);
}

body .crm-container input.form-submit:focus, 
body .crm-container input.form-submit:hover, 
body .crm-container input.form-submit:active {
  color: var(--active-color);
  border-color: var(--active-color);
}

/* other */



@media (min-width: 992px) {
  .content {
    display: block;
  }
}
.petition-section.section-logo {
  order: -2;
}
.petition-section.section-form {
  order: -1;
  margin-bottom: 3.125rem;
  max-width: 31.25rem;
}
.petition-section.section-title {
  margin-bottom: 2rem;
}
.petition-section.section-intro {
  margin-bottom: 1.5625rem;
}
.petition-section.section-logo {
  margin-bottom: 2.75rem;
}
@media (min-width: 992px) {
  .petition-section {
    width: 60%;
  }
}

@media (min-width: 768px) {
  #petition_title,
  #petition_title h1 {
    max-width: 31.25rem;
    text-align: justify;
  }
}
#petition_logo img {
  width: 100%;
  max-width: 18.75rem;
}
#intro_text {
  color: white;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.59;
  background: none;
  margin-top: 0;
  padding: 0;
}
.intro_text-section-inner {
  background-color: rgba(0,0,0,0.5);
  padding: 0.625rem;
}
@media (min-width: 768px) {
  #intro_text {
    max-width: 31.25rem;
  }
}
body.frontend #content-header+#content-main {
  background: #fff;
  border-radius: 5px;
  padding: 0.9375rem 0.9375rem 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 992px) {
  body.frontend #content-header+#content-main {
    padding: 2.3125rem 1.5625rem 1.5625rem;
    max-width: 25.75rem;
  }
}
.event_summary-section {
  margin-bottom: 1.9375rem;
  line-height: 1.33;
  font-weight: 900;
  font-size: 2.375rem;
  text-align: center;
  color: var(--marked-color);
}
.field-name-field-subtitle {
  color: var(--active-color);
  text-align: right;
  font-weight: 500;
  line-height: 1.29;
  font-size: 0.9375rem;
  margin: 0.5rem 0 1.25rem;
}
.process-wrapper,
.process-bar {
  display: block;
  border-radius: 0.9375rem;
  height: 1.875rem;
  font-size: 1.125rem;
}
.process-wrapper {
  width: 100%;
  background: #d8d8d8;
  height: 1.875rem;
  overflow: hidden;
}
.process-bar {
  background: var(--marked-color);
  color: white;
  text-align: center;
}
.webform-client-form input {
  font-size: 0.875rem;
}
.webform-client-form>div {
  grid-template-columns: 50%;
  grid-column-gap: 0.625rem;
  display: grid;
  grid-row-gap: 0.625rem;
}
.webform-client-form .form-item,
.webform-client-form .form-actions {
  grid-column: 1/3;
  margin: 0;
  padding: 0;
}
.webform-client-form .form-item.custom-half-size {
  grid-column: 1;
}
.webform-client-form .form-item.custom-half-size+.form-item.custom-half-size {
  grid-column: 2;
}
.webform-client-form .form-item {
  position: relative;
}
.webform-client-form .form-item>input[type="text"],
.webform-client-form .form-item>input[type="email"] {
  border: 1px solid var(--marked-color);
  border-radius: 0;
  color: var(--active-color);
  height: 2.3125rem;
  padding: 0 0.625rem;
  background: none;
  width: 100%;
  font-weight: bolder;
}
.webform-client-form .form-item>input[type="text"]:-moz-placeholder,
.webform-client-form .form-item>input[type="email"]:-moz-placeholder {
  color: var(--active-color);
  opacity: 1;
}
.webform-client-form .form-item>input[type="text"]::-moz-placeholder,
.webform-client-form .form-item>input[type="email"]::-moz-placeholder {
  color: var(--active-color);
  opacity: 1;
}
.webform-client-form .form-item>input[type="text"]:-ms-input-placeholder,
.webform-client-form .form-item>input[type="email"]:-ms-input-placeholder {
  color: var(--active-color);
  opacity: 1;
}
.webform-client-form .form-item>input[type="text"]::-webkit-input-placeholder,
.webform-client-form .form-item>input[type="email"]::-webkit-input-placeholder {
  color: var(--active-color);
  opacity: 1;
}
.webform-client-form select {
  border: 1px solid var(--marked-color);
}
.webform-client-form .form-submit {
  background-color: var(--active-color);
  color: white;
  display: block;
  width: 100%;
  height: 2.5rem;
  -webkit-transition: all ease-in-out .2s;
  -o-transition: all ease-in-out .2s;
  transition: all ease-in-out .2s;
  text-align: center;
  grid-column: 1/3;
  border: 0;
}
.webform-client-form .form-submit:hover {
  background-color: #333;
  color: #fff;
}
.webform-client-form .form-type-checkbox {
  display: grid;
  grid-template-columns: 2.5rem auto;
}

/** Overwrite field error msg */
body.frontend .crm-section label.error {
  margin: 0;
}

/** Placeholder */
@media screen and (min-width: 1024px) {
  .crm-container>form>div.placeholder-intro-text {
    top: 60px;
    right: 605px;
  }
}

/** Overwrite NetiCRM color */
body .crm-container-md .crm-form-checkbox .elem-label::before, 
body .crm-container-md .crm-form-checkbox .form-checkbox:checked + .elem-label::after{
  border-color: var(--active-color);
}
body .crm-container-md .crm-form-checkbox .form-checkbox:checked + .elem-label {
  color: var(--active-color);
}


/*for MSie10 , MSie11*/
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .webform-client-form .form-type-checkbox {
    padding-left: 2.5rem;
  }
  .webform-client-form .form-item,
  .webform-client-form .form-actions {
    padding-bottom: 0.625rem;
    height: 2.94rem;
  }
}
.webform-client-form input[type="checkbox"] {
  opacity: 0;
  position: initial;
}
.webform-client-form input[type="checkbox"]+label:after {
  left: 0;
  transform: translateY(-50%);
  top: 1.125rem;
  border-radius: 50%;
  background-clip: padding-box;
  position: absolute;
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid var(--active-color);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-sizing: content-box;
  background-clip: padding-box;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.webform-client-form input[type="checkbox"]:checked+label:after {
  border: 2px solid var(--active-color);
  background: var(--active-color);
}
.webform-client-form input[type="checkbox"]+label:before {
  position: absolute;
  content: "";
  width: 0.5625rem;
  height: 0.25rem;
  top: 1.025rem;
  left: 1.3125rem;
  z-index: 1;
  opacity: 0;
  margin-left: -1.125rem;
  border: 3px solid white;
  border-top: none;
  border-right: none;
  background: transparent;
  -moz-transform: translateY(-50%) rotate(-45deg);
  -o-transform: translateY(-50%) rotate(-45deg);
  -ms-transform: translateY(-50%) rotate(-45deg);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  box-sizing: content-box;
}
.webform-client-form input[type="checkbox"]:checked+label:before {
  opacity: 1;
}
.webform-client-form input[type="checkbox"]+label[for] {
  cursor: pointer;
  padding-left: 0;
  font-size: 0.9375rem;
}
.thankyou-cta {
  border-radius: 0.25rem;
}
.chosen-container {
  width: 100% !important;
}
.chosen-container-single a.chosen-single {
  height: 2.3125rem;
  line-height: 2.1875rem;
  background: none;
  border-radius: 0;
  border-color: var(--marked-color);
  color: var(--active-color);
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: none;
  padding: 0 0.625rem;
}
.chosen-container-single .chosen-single div b,
.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position-y: 7px;
}
@media (min-width: 1600px) {
  .chosen-container-single .chosen-single div b,
  .chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position-y: 20px;
  }
}
a.chosen-single:hover {
  text-decoration: none;
}
body.frontend select.form-select {
  border-color: var(--marked-color);
  color: var(--active-color);
}
.webform-component--birth-year- {
  height: 2.3125rem;
}
#edit-submitted-birth-year- {
  display: block !important;
  position: absolute;
  height: 2.3125rem;
  width: 100%;
  font-weight: bolder;
  box-shadow: none;
  color: var(--active-color);
  padding: 0 0.625rem;
}
@media (min-width: 768px) {
  #edit-submitted-birth-year- {
    border: 0;
  }
}
#edit_submitted_birth_year__chosen {
  background: #fff;
  padding: 0;
  border: 0;
  height: 2.3125rem;
}
.cta-btn {
  line-height: 2em;
  color: white;
  display: block;
  width: 100%;
  height: 2.5rem;
  -webkit-transition: all ease-in-out .2s;
  -o-transition: all ease-in-out .2s;
  transition: all ease-in-out .2s;
  text-align: center;
  text-decoration: none;
  margin: 1em 0;
  box-shadow: none;
}
.cta-btn:hover {
  background-color: #333;
  color: white;
}
.body-cta {
  border: 1px solid var(--marked-color);
}
.body-cta:hover {
  background-color: var(--marked-color);
  color: white;
}
.thankyou-cta {
  background-color: var(--marked-color);
}
.full-width-video .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.az-video.embed-responsive {
  position: relative;
  padding-top: 61.8034%;
  height: 0;
  width: 100%;
}
.az-video.embed-responsive iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

/** for IE */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .webform-client-form .form-item.webform-component--agree-receive- {
    height: 140px;
  }
}


@media (max-width: 992px) {
  #main::before{
    height: 100vh;
    background: var(--cet-mobile-bg) no-repeat center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    content: "";
    z-index: -1;
  }

}
/*ANCHOR - D10 新主題適配（#46234）
  cet theme 無 #content-header/#content-main/#main-inner，h1 class 是 title 不是 page-title */
/* 右欄白卡＝舊 body.frontend #content-header+#content-main 的對應 */
body.frontend #crm-container {
  background: #fff;
  border-radius: 5px;
  padding: 0.9375rem 0.9375rem 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 992px) {
  body.frontend #crm-container {
    padding: 2.3125rem 1.5625rem 1.5625rem;
  }
}
/* 頁標題白色大字＝舊 #main h1.page-title 的對應 */
#main h1.title {
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 3px 3px 6px #333;
  font-size: 3.25rem;
  text-align: justify;
  font-family: "Noto Sans TC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
}
@media (max-width: 992px) {
  #main h1.title {
    margin-bottom: 4rem;
  }
}
/* 連署詳情：js 移到 #main-wrapper 之後（body 層級）＝舊站 footer region 位置，天生滿版；
   sticky 欄位作用範圍止於 #main，捲過雙欄後 iframe 區正常接上 */
.block-cet-civicrm-event-petition {
  width: 100%;
}
/* 左欄疊字中和：舊站複製來的 footer_text 內容自帶 inline position:absolute（座標照舊站版面手調），
   新結構下會錨到 sticky 的 #intro_text 頂端、疊住 d9.js 搬進來的 h1 與 logo → 一律攤回文流 */
#footer_text [style*="position: absolute"],
#footer_text [style*="position:absolute"] {
  position: static !important;
}

@media screen and (min-width: 1400px) {
  .cet-event-petition.civicrm-contribute-sp.frontend .main#main {
    max-width: 1140px;
  }
}