@charset "utf-8";

html {
     font-size: 1em;
     font-family: "Arial","Times New Roman","sans-serif","Microsoft JhengHei","SimSun";
     letter-spacing: 2px;
}

body {
     background-color: #f6f5ed;
     margin: 0px;
     margin-bottom:30px;
}

a {
     letter-spacing: 0px;
}

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

select {
     height:26px;
}

input[type="date"]{
     font-size:1.2em;
     width:110px;
}

input[type="checkbox"]{
     margin-right:10px;
}

input[type="email"]{
     width:300px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
     -webkit-appearance: none;
}

h1 {
     background-color: #8A5519;
     font-size: 1.4em;
     color: white;
     padding: 4px;

     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;
          text-decoration: none;
     }
}

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

h1, h2, ul {
     margin-block-start: 0px;
     margin-block-end: 0px;
}

.SpanSpace, span{
     letter-spacing:1px;
}

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

     div {
          height: 5em;
          margin: auto;
          display: flex;
          align-items: center;
          max-width: 1000px;
     }

     img {
          max-width: 100%;
     }
}

#banner {
     width: 100%;
}

#ProgressBar {
     letter-spacing: 1px;
     padding-bottom: 0.3em;
}

     #ProgressBar a {
          text-decoration: none;
     }

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

.w98P {
     width: 90%;
}

.w100 {
     width: 100px;
}

.w200{
     width:80%;
     max-width:160px;
}

.w400 {
     width: 80%;
}


#TB_Surname{
    width:clamp(80px, 30%, 150px)
}

#TB_Givenname{
    width:clamp(150px, 50%, 200px)
}

#DDL_District {
     font-family: MingLiU_HKSCS;
     width:200px;
}

.DivSession{
     padding:1em;
}

        div.g-recaptcha {
            margin: 0 auto;
            width: 304px;
        }

.Div2{
     display:grid;
     grid-template-columns:350px 1fr;
     gap:5px;
}

.Div2 div:nth-child(odd){
     font-weight:bold;
     text-align:right;
     padding-right:0.5em;
}

.CbScore {
     margin-left: 2em;
     display: block;
     text-indent: -27px;
     margin-bottom:0.5em;
}

.SpanCb{
     white-space:nowrap;
     margin-right:1em;
}

.Privacy{
     font-size:0.8em;
     letter-spacing:0px;
}

ul{
     padding-left:1em;
}

li{
    list-style-type:decimal;
    padding-bottom:0.5em;
}

#Lb_Awards li, #LbScores li {
    margin-left: 1em;
}

#DivRequest{
    text-align:center;
}

.DivUpload{
     display:grid;
     grid-template-columns:1fr 250px;
     gap:0.5em;

     padding:1em;
     background-color:#f6f5ed;
     margin-bottom:1em;

     div:first-child{
         grid-column:1/3;
         font-weight:bold;
    }

    div:nth-child(2){
       padding-left:70px;
       input[type="file"]{
                           width:90%;
                       }
    }
}

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

     li {
          padding-left: 0px;
     }

     #DivHeader div {
          height: 60px;
     }

     #ProgressBar {
          letter-spacing: 0px;
          padding-top: 0px;
          padding-bottom: 5px;
     }

     #DivBody {
          padding-top: 70px;
     }

     #DDL_District {
          width: 90%;
     }

     .Div2 {
          grid-template-columns: 130px 1fr;
          gap: 2px;
     }

     .DivSession {
          padding: 0.3em;
     }

     #DDLKnowAbout {
          width: 95%;
     }

     input[type="email"]{
     width:90%;
    }
}