/* main containers */
#gq-container { font-family: 'Palatino'; color: #34242C; width: 100%; min-height: 400px; border-radius: 8px; overflow: auto;}

/* progress */
#gq-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid #8f5a14; border-radius: 0px 12px 12px 0px; margin-left: -9px; padding: 8px; background: #ffffff5e; }
#gq-progress .progress-success, #gq-progress .progress-current, #gq-progress .progress-unfinished { width: 24px; height: 24px; background-size: cover; }
#gq-progress .progress-success { background-image: url('assets/ic_checked.png'); }
#gq-progress .progress-current { background-image: url('assets/ic_check_current.png'); }
#gq-progress .progress-unfinished { background-image: url('assets/ic_unchecked.png'); opacity: 0.3; }
#gq-progress .progress-last-finished { background-image: url('assets/ic_last_finished.png'); }
#gq-progress .progress-last-unfinished { background-image: url('assets/ic_last_finished.png'); opacity: 0.3; }
#gq-progress .progress-last-finished, #gq-progress .progress-last-unfinished { width: 42px; height: 42px; background-size: contain; background-position: center; background-repeat: no-repeat; }

/* content */
#gq-question-container { padding: 1em; background: #FFFBEC; border: 1px solid #D5D3C6; width: 95%; margin: 0 auto; border-radius: 0px 0px 40px 40px; overflow-wrap: anywhere; }
#gq-question-title { text-align: center; font-size: 40px; margin-bottom: 12px; font-weight: 600; line-height: 1em; }

/* answers */
#gq-answer-container { clear: both; border-top: 1px solid #d5d4c6; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 1em; margin-left: 1em; margin-right: 1em; margin-top: 12px; }
#gq-answer-form-container { display: flex; justify-content: center; }
#gq-answer-container button { width: 135px; border-radius: 6px; font-weight: bold; }
#gq-answer-input { background: white; width: 340px; margin-right: 1em; }
#gq-answer-button, #gq-playagain-button { background: #35242c; color: white; border: 2px solid #6a5c5f; margin-right: 0.5em; }
#gq-answer-hint{ background: #DFA75A; color: #f3e0c2; border: 2px solid #E8C080; }
#gq-answer-hint-tooltip { background: #ffecd1a6; color: #8e5a12; padding: 1em; width: 66%; border-radius: 12px; margin-bottom: 1em; border: 1px solid #8f5a12; align-items: center; overflow-wrap: anywhere; }
#gq-answer-hint-tooltip img { height: 32px; margin-right: 1em; }

/* modal */
#gq-modal-container { font-family: 'Palatino'; color: #34242C; display: none; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; background: #000000c2; position: fixed; z-index: 99999; }
#gq-modal-content { background: white; width: 60%; min-height: 300px; display: flex; border-radius: 20px; flex-direction: column; justify-content: center; align-items: center; padding: 1em; }
#gq-modal-icon { width: 64px; height: 64px; margin-bottom: 20px; }
#gq-modal-title { font-size: 36px; }
#gq-modal-text { margin-top: 10px; text-align: center; }
#gq-modal-button { margin-top: 20px; padding: 0.5em 1.2em; border-radius: 30px; font-weight: bold; }
#gq-modal-text strong { font-size: 26px; line-height: 1.5em; }

/* header */
#gq-head-container { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 6px; background: wheat; border-left: 12px solid #8f5a14; border-bottom: 1px solid #8f5a1440; }
#gq-container-pre h2 { text-align: center; }
#gq-container-pre h2, #gq-head-container h2 { color: #8f5a14; }
#gq-head-container h2 { margin-bottom: 10px; }

/* menu  */
#gq-menu-container { display: flex; justify-content: end; }
#gq-menu-save, #gq-menu-restart { cursor: pointer; height: 50px; width: 50px; display: flex; background: #dfa75a; margin-left: 8px; border: 2px solid #e8c080; border-radius: 8px; justify-content: center; align-items: center; }
#gq-menu-save:hover, #gq-menu-restart:hover { background: #ffe5bd; border-color: white; }
#gq-menu-container img { height: 25px; }

/* pre-game */
#gq-container-pre { display: flex; flex-direction: column; background: #FFFBEC; border-radius: 12px; padding: 1em; margin-bottom: 1em; justify-content: center; align-items: center; border: 1px solid #D5D3C6; }
#gq-pregame-load-container { display: flex; flex-direction: column; margin-top: 1.5em; border-top: 1px dashed #dcbd8b; padding-top: 1em; align-items: center; width: 80%;}
#gq-pregame-start { background: #35242c; color: white; border: 2px solid #6a5c5f; margin-top: 1em; }
#gq-pregame-load-button { background: #DFA75A; color: #f3e0c2; border: 2px solid #E8C080; width: auto !important; height: 42px !important; margin-top: 0.5em; padding-left: 2em; padding-right: 2em; }
#gq-container-pre button { width: 320px; border-radius: 6px; font-weight: bold; height: 52px; }
input#gq-pregame-load-code { height: 28px; background: white; width: 320px; }

/* redirect  */
a#gq-redirect-button { color: white; background: #2d8dba; padding: 1em; border-radius: 12px; min-width: 250px;display: inline-block; }
a#gq-redirect-button:hover { background: #82daf5; }

/* mobile responsivity */
@media only screen and (max-width: 782px) 
{
	#gq-answer-form-container { flex-direction: column; width: 100%; }
	#gq-answer-input, #gq-answer-container button { width: 100%; }
	#gq-answer-button { height: 52px; margin-top: 12px; }
	#gq-answer-hint { height: 52px; margin-top: 12px; }
	#gq-answer-hint-tooltip { width: 100%; }
	#gq-head-container { flex-direction: column-reverse; }
	#gq-progress { border-radius: 12px; margin-left: 0px; margin-bottom: 12px; }
	#gq-head-container { border-left: none; }
	#gq-head-container h2 { margin-top: 12px; }
}