#appContent{padding:0 max(calc(50vw - 200px), 15px);}
#errorText{margin-top:20px;text-align:center;}

.mt0{margin-top:0!important;}
.box{background:white;position:relative;border-radius:10px;padding:20px;margin-top:10px;}
.box .grey{font-size:.9em;opacity:.6;margin-top:10px;}
.box .info{font-size:1.2em;margin-top:3px;}
.box .floatLink{position:absolute;top:20px;right:20px;font-size:.9em;}

#subjectGrid{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
#subjectGrid>div{background:white;border-radius:10px;padding:10px 15px;transition:all .2s;position:relative;}
#subjectGrid>div:hover{color:#3BB0FE;}
#subjectGrid>div:active{color:#3BB0FE;transform:scaleY(.95) scaleX(.98);}
#subjectGrid>div.active{background:#E8F5FF;color:#3BB0FE;}
#subjectGrid>div .title{font-size:1.2em;}
#subjectGrid>div .info{font-size:.9em;opacity:.8;}
#subjectGrid>div .check{display:block;width:0px;overflow:hidden;transition:width .4s;position:absolute;top:10px;left:calc(100% - 35px);font-size:1.2em;}
#subjectGrid>div.active .check{width:20px;}

.registerPayment{margin:50px 0;display:flex;align-items:center;}
.registerPayment .left{flex-grow:1;}
.registerPayment .left .regFee{display:flex;align-items:center;}
.registerPayment .left .regFee #paymentFee{color:#3BB0FE;font-size:1.5em;margin-left:-5px;}
.registerPayment .left .regFee #originalFee{color:#666;text-decoration:line-through;margin-left:5px;}

.simplePage{padding:50px 0;text-align:center;}
.simplePage>i{font-size:5em;color:#3BB0FE;}
.simplePage .title{font-size:1.5em;}
.simplePage .desc{margin:3px 0;}
.simplePage button{margin:10px 0;}

#staffDialog .modalContent{text-align:center;}
#staffDialogQrcode{width:200px;height:200px;margin-top:10px;}
[open] #staffDialogQrcode{pointer-events:all;}

@media (min-width: 1000px) {
	#appContent{padding:0 max(calc(50vw - 490px), 15px);}
	.registerInfo{display:flex;gap:20px;}
	.registerInfo>div{flex-grow:1;}
	.registerPayment{margin-top:20px;}
}