@charset "UTF-8";

html {
     font-size: 1.2em;
}

body {
     font-family: "Arial","Times New Roman","sans-serif","Microsoft JhengHei","SimSun";
     letter-spacing: 2px;
     margin: 0px;
}

body, #ProgressBar {
     background-color: #f6f5ed;
}

*:lang(en), #ProgressBar {
     letter-spacing: 1px;
}

h1 {
     font-size: 1.2em;
     background-color: #ba9c78;
     color: white;
     padding: 6px;
}

     h1 a {
          border-radius: 5px;
          float: right;
          margin-top: 2px;
          margin-right: 5px;
          padding: 1px 5px;
          background-color: white;
          color: black;
          font-size: 0.8em;
          font-weight: 500;
     }

h1, #LbPrivacy p, ol {
     margin-block-start: 0px;
     margin-block-end: 0px;
}

input, select {
     font-size: 1em;
}

     input[type="number"]::-webkit-outer-spin-button,
     input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
     }

     input[type="email"] {
          width: 90%;
          max-width: 300px;
     }

     input[type=submit] {
          min-width: 100px;
     }

select {
     height: 1.5em;
}

ol {
     font-size:0.8rem;
     letter-spacing: 1px;
     margin-left: -15px;
}

a {
     text-decoration:none;
}

#DivHeader {
     width: 100%;
     background-color: white;
     box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.5);
     position: fixed;
     z-index: 99;
}

     #DivHeader div {
          height: 5em;
          margin: auto;
          display: flex;
          align-items: center;
     }

     #DivHeader div, #DivBody {
          max-width: 1000px;
     }

     #DivHeader img {
          max-width: 100%;
     }

     #DivHeader span {
          margin-left: auto;
     }

     #DivHeader a {
          white-space: nowrap;
     }

#DivBody {
     margin: 0 auto;
     margin-bottom: 2em;
     padding-top: 5.5em;
     background-color: #f4ece3;
}

#ProgressBar {
     padding-bottom: 5px;
}

.w100 {
     width: 100px;
}

/*Activities Page*/
#GV_Activities {
     width: 100%;
     border-collapse: collapse !important;
}

     #GV_Activities tr {
          background-color: #f4ece3;
          cursor: pointer;
     }

          #GV_Activities tr:first-child {
               background-color: #ba9c78;
               height: 30px;
          }

          #GV_Activities tr:nth-child(even) {
               background-color: #fff5e9;
          }

     #GV_Activities th, #GV_Activities td {
          border: 1px solid white;
          padding: 10px;
     }

     #GV_Activities th {
          white-space: nowrap;
     }

     #GV_Activities td {
          text-align: center;
     }

          #GV_Activities td:nth-child(2) {
               width: 20%;
               min-width: 200px;
          }

          #GV_Activities td:nth-child(3) {
               text-align: left;
          }

.timePhase, #SpanRemark {
     font-size: 0.8em;
}

/*Activity page*/
.FbShare {
     float: right;
}

.description {
     line-height: 130%;
}

#Banner {
     width: 100%;
}

#DivContainer, #DivContainer1, #DivContainer2, #DivReceiptStatus {
     padding: 2em;
}

     #DivContainer > div {
          text-align: center;
     }

     #DivContainer > div div {
          margin-top:20px;
     }

#DivContainer1 > div:last-child{
     text-align:center;
}

#DivDetails {
     display: grid;
     grid-template-columns: 20% 1fr;
     margin-top: 2em;
     margin-bottom: 2em;
     width: 100%;
}

     #DivDetails div {
          padding: 10px;
          border: 1px solid white;
     }

          #DivDetails div:nth-child(4n) {
               background-color: #f4ece3;
          }

          #DivDetails div:nth-child(4n+1) {
               background-color: #f0e0c3;
          }

          #DivDetails div:nth-child(4n+2) {
               background-color: #fff5e9;
          }

          #DivDetails div:nth-child(4n+3) {
               background-color: #ffefd0;
          }

          #DivDetails div:nth-child(4n+1), #DivDetails div:nth-child(4n+3) {
               text-align: right;
               font-weight: 700;
          }

#LbClosed {
     color: red;
}

/*Submit page*/
.smallfont {
     font-size: 0.8em;
     letter-spacing:0px;
}

#TB_Surname {
     width: 25%;
}

#TB_Givenname {
     width: 45%;
}

#DivContainer2 {
     display: grid;
     grid-template-columns: clamp(100px, 200px, 20%) 1fr;
     gap:0.5em;
}

     #DivContainer2 > div:nth-child(odd) {
          text-align: right;
          font-weight: bold;
     }

     #DivContainer2 > div:last-of-type {
          grid-column: 1/3;
          text-align: center;
     }

          #DivContainer2 > div:last-of-type input[type=submit], #DivReceiptStatus div {
               margin-top: 2em;
          }

     #DivContainer2 > span:last-of-type {
          grid-column: 1 / 3;
          font-size: 0.8em;
     }

#LbPrivacy {
     padding-right: 2em;
}

/* Confirm Page*/
div.g-recaptcha {
     margin: 0 auto;
     width: 304px;
}

/*Enroll Page*/
#LbSystemNo {
     color: blue;
}

/*Receipt page*/
#DivReceiptStatus div {
     text-align: center;
}

#PopupContent {
     width: 800px;
     border: 1px solid black;
}

     #PopupContent > div:first-child, #PopupContent > div:last-child {
          text-align: center;
          font-weight: bold;
     }

     #PopupContent > div:first-child {
          background-color: #ba9c78;
          color: white;
          font-size: 1.2em;
          padding: 0.2em;
     }

     #PopupContent > div:last-child {
          padding-bottom: 0.5em;
     }

     #PopupContent > div:nth-child(2) {
          display: grid;
          grid-template-columns: 200px 1fr;
          gap: 0.5em;
          padding: 1em;
     }

          #PopupContent > div:nth-child(2) > div:nth-child(2) > input[type=text] {
               width: 40%;
          }

          #PopupContent > div:nth-child(2) > div:nth-child(4) > input[type=text] {
               width: 90%;
          }

          #PopupContent > div:nth-child(2) > div:nth-child(odd) {
               text-align: right;
               font-weight: bold;
               margin-right: 0.5em;
          }

#BtnExit {
     background-color: transparent;
     width: 25px !important;
     min-width: 25px !important;
     border: none;
     float: right;
     padding-top: 2px;
     height: inherit !important;
}

#BtnFake {
     display: none;
}

#Panel1 {
     background-color: white;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
     html {
          font-size: 1em;
     }

     #DivHeader div {
          height: 4em;
     }

     #DivHeader span {
          margin-left: 10px;
     }

     #DivBody {
          padding-top: 4em;
          margin-bottom: 1em;
     }

     #ProgressBar {
          padding-top: 0px;
          /*padding-bottom: 0px;*/
     }

     h1 {
          /*font-size: 1em;*/
          padding: 2px;
     }

     #GV_Activities th, #GV_Activities td, #DivContainer,#DivContainer1 , #DivContainer2, #DivDetails div {
          padding: 3px;
     }

          #GV_Activities td:nth-child(2) {
               min-width: 130px;
          }

     #DivDetails, #DivContainer2 {
          grid-template-columns: 80px 1fr;
     }
}