*{user-select:none;box-sizing:border-box;}
*:focus{outline:none;}
a{color:inherit;}
hr{height:1px;}
body,html{margin:0;height:100%}
img,canvas{max-width:100%;}
button{
	word-break:keep-all;
	padding:1.5rem;

	background-color: #b47e4b;
	color: white;
	border: 0;
	border-radius: 2rem;

	box-shadow:.3em .3em 1em rgba(0,0,0,.2);
}
fieldset{padding:0;border:0;}
input:not([type=checkbox]):not([type=radio]):not([type=file]){
	-webkit-appearance:none;
	background-color:rgba(0,0,0,.03);

	border:0;
	border-radius:2rem;
	/*border-bottom:1px solid black;*/

	padding:1em 2rem;
	margin:0;
	/*margin-bottom:-2px;*/
}
input[type=checkbox],input[type=radio]{
    transform:scale(1.5);
}
input[type=text]{
	letter-spacing:2px;
}
[W100]{width:100%;}
[H100]{height:100%;}
[MH100]{max-height:100%;}
[PAD]{padding:1em;}
[DIM]{opacity:.3}
[DIM7]{opacity:.7}

flex{
	display:flex;
	&[WRAP]{flex-wrap:wrap;}
	&[COL]{flex-direction:column;}
	&[CENTER]{justify-content:center;}
	&[AROUND]{justify-content:space-around}
	&[BETWEEN]{justify-content:space-between;}
	&[MIDDLE]{align-items:center;}
}

grid{display:grid;}
flex[GAP],grid[GAP]{gap:1em;}
form grid{
	grid-template-columns:100px 1fr;
	&>grid{grid-column: span 2;}
	&>flex>grid{grid-template-columns:130px 1fr;}
	& label{text-align:right;padding:1em;}
}
font[lang]{display:block;}

right{display:block;text-align:right;}

[MONO]{font-family:'Roboto Mono',monospace;}
[SANS]{font-family:'Noto Sans HK',sans-serif;}
[SERIF]{font-family:'Noto Serif TC',serif;}
[SMALL]{font-size:small;}

[BGG]{background-color:rgba(0,0,0,.03);}

#VERSION{
	position:absolute;
	right:1rem;
	top:1px;
	opacity:.4;

	font-size: xx-small;
}
#SIGNOFF{
	position:absolute;
	left:1rem;
	top:1px;
	/*opacity:.2;*/

	font-size: xx-small;
}

/*#ANN12>fieldset>*:not(hr){
	padding:0 1em;
}
#ANN12FIELDS[disabled]{
	opacity:.3;
}*/

#LANG{
	position:absolute;
	right:.5rem;
	top:.5rem;
	/*background: none;*/
	border: 0;
	/*color: dimgray;*/
	cursor: pointer;
}

#SPINNER{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed !important;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:999;
	background-color:rgba(0,0,0,.3);

	opacity:0;
	pointer-events:none;
	transition:opacity .3s;
}
#SPINNER[OPEN]{
	opacity:1;
	pointer-events:auto;
}

#COVER,#MSG:not(:empty){
	overflow:hidden;
	position:relative;
	/*background-image:url(/asset/img/BB.png?_RAW);*/
    background-size:cover;
    background-image:linear-gradient(60deg,#ede7d9,#faf9f4);
    color:#5f5b5a;
    padding:3em 2em;
}
#MSG{
	margin: 1rem;
	line-height: 2rem;
	border-radius: 1rem;
}
#COVER{
	min-height:800px;
    max-width: 600px;

    margin:0 auto;
}
[COVERLOGO]{
	width:300px;
}

[CONTACT]{
	position:absolute;
	bottom:0;
	left:0;
    text-align: left;

    background-color:#a46019;
    color:white;
    width:100%;

	opacity:.8;
	padding:1.5em 2.4em;
    font-size:small;
}

[hidden]{
	display:none;
}

#SHORTCUT{
	position:sticky;
	top:0;
	background-color:rgba(255,255,255,.7);
	z-index:1;
	white-space:nowrap;
	/*overflow-x:scroll;*/
}

#attended:not(:checked)~#HAS_ATTENDED{
	display:none;
}
#attended:checked~#NOT_ATTENDED{
	display:none;
}

[GREEN]{
	color:green;
}
[RED]{
	color:red;
}

#CLOSE{
	position:fixed;
	top:0;
	right:0;
	z-index:999;
}

#MAIN{
	place-content: center;
	max-width: 1800px;
	margin: 0 auto;
}

#TITLE [lang="zh-HK"]{
	letter-spacing: .11rem;
	line-height: 2.4rem;
}

label:has(+input[required])>font::before{
	content: "* ";
}

@media only screen and (max-width: 800px){
	flex[RWD]{display:block}
	#COVER{aspect-ratio:1/1;}

	form grid{
	    grid-template-columns: 100px 1fr;
	}

	#ANN{
		padding: 0;
	}

	#TITLE{
		text-align: center;
	}

	#COVER {
		display: none;
	}
	#CARD {
		display: inline-block;
		margin-block-end: 1rem;
	}
	button{
		font-size: x-small;
		padding: 1rem 1.4rem;
	}
}
@media only screen and (min-width: 801px){
	#COVER{
		/*height:96vh;*/
	    position:sticky;
	    top:1em;
	    border-radius: 2rem;
	    margin:1em auto;
	    box-shadow:.3em .3em 1em rgba(0,0,0,.2);
	    /*overflow:scroll;*/
	}
}
@media only screen and (min-width: 1500px) {
	form grid>grid{
		grid-template-columns: 100px 1fr 100px 1fr !important;
	}
}