html,body {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-color: #ffffff;
}
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}
*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}
*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}
video::-webkit-media-controls-enclosure
{
    display:none !important;
    -webkit-appearance: none;
}
#loading-tip,#progress-tip { position: absolute; left: 50%; top: 50%; width: 53vw; height: 6.6vw; font-size: 4vw; line-height: 6.6vw; border-radius: 2.4vw; color: #FFF; background-color: rgba(0,0,0,0.5); z-index: 2000; text-align: center; transform: translateX(-50%); display: none; }
#loading-tip .glyphicon,#progress-tip .glyphicon { top: 0.5vw; animation:loading_rotation 5s 0s linear infinite; }
@keyframes loading_rotation {
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
#popup-layer { background-color: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000; display: none; }
.popup-content { width: 100%; height: 100%; display: flex; align-items:center; overflow-y: scroll; padding: 0px 0px 0px 0px; }
#text-message { position: relative; width:90%; background:rgba(255,255,255,1); border-radius:10px; box-shadow:0px 4px 20px 0px rgba(48,48,48,0.5); margin: auto; padding: 40px 20px 40px 20px; }
#text-message-content { font-size:16px; color:rgba(0,0,0,1); line-height:25px; text-align: center; }
.popup-close { position: absolute; }
#text-message .popup-close { top: 10px; right: 10px; }

.form-control { border-bottom-right-radius: 6px !important; border-top-right-radius: 6px !important; }
.input-group-prepend .input-group-text { border-bottom-left-radius: 6px; border-top-left-radius: 6px; padding-right: 0px; } 
.input-group-text { padding-right: 0px; width: 32vw; }
.form-control[disabled] { opacity:1; border-color: #bdc3c7; background-color: #e9e9e9; color: #777777!important; }
input:disabled { color: #777777 !important; opacity: 1; -webkit-text-fill-color: #777777; }
.select2-container-disabled { color: #777777 !important; opacity: 1; background-color: #e9e9e9; }
.select2-container-disabled .select2-arrow { opacity: 0; }
.select2-choice { padding: 0px 20px 0px 0px; }
.select2-results .select2-result:first-child { color:#959595; }
.select2-arrow { border-color: #9f9f9f transparent; }
.select2-offscreen { display: none; }

.form-control a {color: #2b2a2a; min-height: 10px; }

#start-page { display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100vh; background-color: #5ebdec; }
#start-btn { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); background-color: #1962a9; }
#rule-btn { position: absolute; left: 50%; top: 72%; transform: translateX(-50%); }

#form-page { padding: 10px 0px 50px 0px; display: none; }
#form-title { text-align: center; margin-bottom: 16px; }
#form-title h5 { margin-bottom: 5px; }

#read-rule { text-align:center; }
#read-rule .checkbox { display: inline-block; }
#rule-info { font-weight: bold; text-decoration: underline; }

#err-alert { text-align: center; color: #b90606; font-size: 14px; line-height: 1; height: 14px; }

#submit-btn { width: 100%; margin: auto; }
#addtive-form { display: none; }

#success-page { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100vh; background-color:#FFF; text-align: center; }
#success-icon { text-align: center; padding-top: 100px; }
#success-msg { text-align: center; margin-top: 100px; font-size: 30px; line-height: 1; }
#info-btn { margin: 50px auto; background-color: #1962a9; }

#qr-block { display: none; text-align: center; margin: 20px auto 40px auto; }
#qr-title { font-size: 24px; font-weight: bold; line-height: 1.5; }
#qrcode { width: 65%; margin: 20px auto 30px auto; }
#qr-description p { font-size: 16px; line-height: 1.1; margin: 8px 0px; }
.thumbnail canvas { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }

#sn-block { display: none; text-align: center; margin: 30px auto 30px auto; }
#sn-block div { font-size: 24px; line-height: 1.5; font-weight: bold; }

#open-app-btn { width: 150px; background:#2025b5; border-radius:8px; color: #FFF; font-size: 16px; line-height: 30px; text-align: center; margin: 20px auto 0px auto; padding:0px; }
#rule-modal p { font-size: 16px; }

#is-volunteer-text { font-size: 12px; width: 53%; }
#s2id_province { border-right-width: 0px; border-radius: 0px !important; padding-right: 0px; word-break: keep-all; font-size: 12px; }
#s2id_city { padding-right: 0px; word-break: keep-all; font-size: 12px; }
#s2id_province .select2-choice { font-size: 14px; }
#s2id_city .select2-choice { font-size: 14px; }
#group-name { display: none; }