@charset "UTF-8";

html {
     font-size: 1.2em;
}

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

*:lang(en) {
     letter-spacing: 0px;
}

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

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

input {
     font-size: 1em;
}

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

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

a {
     text-decoration: none;
}

textarea {
     font-size: 1.2em;
     height: 5em;
     width: 90%;
}

#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 img {
          max-width: 100%;
     }

     #DivHeader span {
          margin-left: auto;
     }

     #DivHeader a {
          white-space: nowrap;
     }

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

#ProgressBar {
     padding-bottom: 5px;
}

#DivBody {
     margin: 0 auto;
     padding-top: 5.5em;
}

/*#DivBody > input[type=submit]{
    display:block;
    margin:1em auto;
}*/

input[type=submit]{
    display:block;
    margin:0 auto;
}

#BodyContainer {
     padding: 1em;
     display: grid;
     grid-template-columns: 170px 1fr;
     gap: 5px;
     background-color: #f4ece3;
}

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

     #BodyContainer > div:last-child {
          text-align: center;
          grid-column: 1 / span 2;
     }

#TxtContact {
     width: 80%;
     max-width: 300px;
}

#TxtPhone {
     width: 20%;
     min-width: 100px;
}

#LbPrivacy {
     padding-right: 2em;
     font-size: smaller;
}

div.g-recaptcha {
     margin: auto;
     width: 304px;
     margin-top: 1em;
     margin-bottom: 1em;
}

.smallfont {
     font-size: smaller;
}

@media only screen and (min-width: 320px) and (max-width: 500px) and (orientation: portrait) {
     html {
          font-size: 1em;
     }

     #DivHeader div {
          height: 4em;
     }

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

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

     #BodyContainer {
          padding: 3px;
          grid-template-columns: 80px 1fr;
     }
}

@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;
     }

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

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

     #BodyContainer {
          padding: 3px;
          grid-template-columns: 80px 1fr;
     }
}