@media(max-width:1100px) {

}


@media(max-width:767px) {
    :root {
        --padding-table-cell: 4px;
        --question-survey-width: 816px;
    }
    div { scrollbar-width: thin; }
    
    /* title form question */
    .q-create-form-question .q-header-left,
    .q-create-form-question .q-header-center,
    .q-create-form-question .q-header-right { width: 50%;}

    /* .q-cover-media {max-height: 180px; height: 100% !important; width: 100% !important; max-width: 320px;} */
    .c-page-num { font: var(--typo-bold-body-lg);}

    .tabPreview.previewMode { padding: 0;}
    .previewMode .q-question-preview .embed-responsive-16by9::before { display: none;}
    .previewMode .q-question-preview .embed-responsive-16by9 .q-form-question-preview { position: relative; height: auto;}
    .previewMode .q-question-preview .c-cover-question { padding: 12px;}

    .previewMode .q-listgroup-question { padding: 8px 12px 16px;}
    .q-form-question-footer .q-form-question-footer-btn-next-back { margin-left: 0;}

    

    /* doing question */
    .q-doing-question .q-form-question-preview-content .QUESTION_LIST {  padding: 8px;}
    .q-doing-question .q-form-question-footer .form-time-remain:not([style*="none"]) + .q-form-question-footer-btn-next-back { margin: 0 auto;}
    .q-doing-question [all-page="1"] .q-form-question-footer .form-time-remain:not([style*="none"]) + .q-form-question-footer-btn-next-back { margin: auto 0 auto auto;}
    .q-doing-question :not([all-page="1"]) .q-form-question-footer .form-time-remain:not([style*="none"]) + .q-form-question-footer-btn-next-back { margin: 0 auto 0 0;}
    .q-doing-question :not([all-page="1"]) .q-form-question-footer .q-form-question-footer-btn-group-position { flex-wrap: wrap;}
    .q-doing-question .q-form-question-footer .q-countdown-time { width: 100%; height: auto; order: 3;}
    .q-countdown-time { width: 80px; height: 32px;}
    .q-doing-question .c-cover-question.d-content-surveylist { flex-grow: 1; overflow: var(--overlay);}

    .divForm.tabPreview { padding: 0;}
    .divForm.tabPreview .q-form-content { padding: 12px 12px 20px;}

    .tabDesign.border-left { padding: 0; border-left: 0 !important;}
    .tabDesign.border-left .q-form-content { padding: 12px 12px 20px;}

    [data-previewmode="N"] .q-listgroup-question { padding: 16px 8px;}
    .q-cover-info-remark .q-info-remark-list i { font-size: 18px; color: #545555; margin-right: 12px; }

    /* [data-previewmode="N"][st="start"] .q-form-question-footer[data-state="start"] .boxStart .btn-start, 
    [data-previewmode="N"] [data-state="cover"] .q-form-question-footer .boxStart .btn-start  */
    .c-page-body[data-sidebar="0"] .q-form-question-footer .q-form-question-footer-btn-group-position > .container,
    .c-page-body[data-sidebar="0"] .c-page-content .container.boxStart { padding-left: 12px; padding-right: 12px;}
    [data-previewmode="N"] .q-form-question-footer .boxStart { flex-wrap: wrap;}
    [data-previewmode="N"] .q-form-question-footer .boxStart .btn { width: 100%;}
    [data-previewmode="N"] .divStart .fld_submitDate { width: 100%; padding:6px 0 0; justify-content: center;}


    .q-title-edit-page-question-mb .q-page-title-name { margin-bottom: 4px; font: var(--typo-bold-body-xl);}

    .p-title-page-question { font: var(--typo-body-lg);}
    .p-title-page-question .q-info-no-delete,
    .q-question-option .q-info-no-delete { top: 10px;}

    .dropdownDeletePage ul .btnDeletePage,
    .dropdownDeleteQuestion ul .btnDelete,
    .dropdownDeleteQuestion ul .btnDeleteQuestion { flex-direction: column;}

    .dropdownDeletePage ul .btnDeletePage[disabled="disabled"] .dropdown-item,
    .dropdownDeleteQuestion ul .btnDelete[disabled="disabled"] .dropdown-item,
    .dropdownDeleteQuestion ul .btnDeleteQuestion[disabled="disabled"] .dropdown-item { color: #848586;}

    .dropdownDeletePage ul .btnDeletePage[disabled="disabled"] .q-info-no-delete-mb,
    .dropdownDeleteQuestion ul .btnDelete[disabled="disabled"] .q-info-no-delete-mb,
    .dropdownDeleteQuestion ul .btnDeleteQuestion[disabled="disabled"] .q-info-no-delete-mb { display: block !important;}

    .q-style .q-form-question-footer-btn-group .btn-primary:not(:disabled):not(.disabled):hover,
    .q-style .q-create-form-question .btn-primary:not(:disabled):not(.disabled):hover { background: var(--primary);}

    .q-question-type .list-group { grid-template-columns: repeat(2, 1fr); gap: 8px;}
    .q-question-type .q-score-type i { font-size: 14px;}

    .q-matchingform { max-width: none; padding: 12px 16px;}
    .divAnswerList .btn.btnText,
    .divAnswerList .btn.btnImage { margin-top: 6px; margin-right: 8px; margin-bottom: 8px; height: var(--btn-md-height); padding: var(--btn-md-padding); font: var(--btn-md-font);}

    [columntype="optImage"] .q-question-content .q-question-type-grid.q-divtablecell .MEDIA_SHOW { max-width: 272px; width: 100%; max-height: 152px;  height: auto;}

    /* Matching */
    .q-divtable[scoretype="MA"] .q-divtableheading .q-divtablehead:nth-of-type(6),
    .q-divtable[scoretype="MA"] .q-divtablebody .q-divtablecell:nth-of-type(2) { max-width: 40px;}
    /* .q-divtable[scoretype="MA"] .q-divtablebody .q-divtablecell:nth-of-type(3) .select2 { width: 60px !important;} */
    .q-divtable[scoretype="MA"] .q-divtablecell .btnMatchEdit { white-space: normal; min-width: 40px; margin-left: 8px;}
    .q-divtable[scoretype="MA"] .q-divtableheading .q-divtablehead:nth-of-type(9), 
    .q-divtable[scoretype="MA"] .q-divtablebody .q-divtablecell:nth-of-type(5) { max-width: 40px;}
    .q-divtable[scoretype="MA"] .q-divtableheading .q-divtablehead:nth-of-type(7), 
	.q-divtable[scoretype="MA"] .q-divtablebody .q-divtablecell:nth-of-type(3) { min-width: 150px; max-width: 150px;}

    /* marking question + report question */
    .q-report-content .q-listgroup-question > .d-flex { flex-direction: column;}
    .q-report-content .q-form-question-preview-content { padding: 0 0 20px;}

    .c-bg-backdrop-modal {content: ''; background: var(--background-modal-24242540, rgba(36, 36, 37, 0.40)); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }

    [page*="EngageSetSurveyForm"][ftype="SU"]:not([mode="preview"])[tab="questions-dataTab"] .c-page-body .q-column .q-column-right { display: block; overflow: auto; }

    .c-content-body .tabMode2.tabDesign .c-form-content { overflow-x: hidden; flex-grow: 1;}
    .q-page[ftype="SU"]:not([mode="preview"])[tab="questions-dataTab"] .q-form .divForm.tabDesign.col-sm-6 { padding: 16px;} 
    .q-page[ftype="SU"]:not([mode="preview"])[tab="questions-dataTab"] .q-form .divForm.tabPreview.col-sm-6 { padding-right: 0;}
    .q-page[ftype="SU"][mode="edit"][tab="questions-dataTab"] .q-form .divForm.col-sm-6,
    .q-page[ftype="SU"][mode="duplicate"][tab="questions-dataTab"] .q-form .divForm.col-sm-6 { padding: 16px; border-radius: 0;}
    .q-page[ftype="SU"][mode="edit"][tab="questions-dataTab"] .c-content-group,
    .q-page[ftype="SU"][mode="duplicate"][tab="questions-dataTab"] .c-content-group { z-index: 1;}

    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body { overflow: hidden;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"][tab="questions-dataTab"] .c-page-body .q-column,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"][tab="questions-dataTab"] .c-page-body .q-column { padding: 0;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body .c-content-body,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body .c-content-body { overflow: auto; overflow-x: hidden;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body .c-content-body hr,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body .c-content-body hr {  margin: 16px 0;}
    
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body > .container,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body .container .c-page-group,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body .container .c-page-group .c-page-content,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body > .container,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body .container .c-page-group,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body .container .c-page-group .c-page-content { height: 100%;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body .c-content-group,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body .c-content-group { overflow: hidden; height: 100%;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .tabMode2.tabPreview[style*="none;"] + .tabMode2.tabDesign:not([style*="none;"]) + .c-bg-backdrop-modal,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .tabMode2.tabDesign:not([style*="none;"]) + .c-bg-backdrop-modal,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .tabMode2.tabPreview[style*="none;"] + .tabMode2.tabDesign:not([style*="none;"]) + .c-bg-backdrop-modal,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .tabMode2.tabDesign:not([style*="none;"]) + .c-bg-backdrop-modal { display: block !important;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .tabMode2.tabDesign[style*="block;"],
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .tabMode2.tabDesign[style*="block;"] { display: flex !important;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .tabMode2.tabDesign,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .tabMode2.tabDesign { position: fixed; z-index: 2; background: #ffffff; left: 0; right: 0; bottom: 0; top: var(--height-header); border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; overflow: hidden; display: flex; flex-direction: column;}
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="edit"] .c-page-body .container .c-page-group .c-page-content,
    [page*="EngageSetSurveyForm"][ftype="SU"][mode="duplicate"] .c-page-body .container .c-page-group .c-page-content { min-height: auto;}
    [page*="EngageSetSurveyForm"][ftype="SU"]:not([mode="preview"])[tab="questions-dataTab"] .q-form-heightpage .q-form { border-radius: 0;}

    [data-previewmode="P"] .c-cover-question { padding-top: 0;}
    
    .c-dympage { margin-bottom: 16px;} 
    
    .tabDesign .btnCloseQuestion { display: block !important; margin-bottom: 16px;}
    .tabDesign .btnCloseQuestion i { font-size: 14px !important;}
    
    .c-sub-item-listgroup .c-form-inputgroup,
    .c-sub-item-listgroup .c-form-inputgroup-inline { gap: 8px; padding: 8px 6px;}
    
    .c-survey-respones .c-content-heading-title { font: var(--typo-page-title);}
    
    [page*="EngageSetSurveyForm"][mode="preview"] .c-page-body .c-content-group .q-column.container { padding: 0;}
    
    .q-page-question .divBtnDel { min-width: 32px; width: 32px; }
    .q-page-question .btn.q-btn-icon,
    .c-type-option .divBtnDel .btn.q-btn-icon,
    .c-type-option .btnDelItem.btn.q-btn-icon,
    .c-list-answer-choice .btnDelItem.btn.q-btn-icon { min-width: 32px; width: 32px; height: 32px; color: #545555;}
    

    .c-content-form .q-btn-add-question button.btn, 
    .c-content-form .q-btn-add-page button.btn { min-width: 150px;}
    .c-form-content .q-uploadfile-action { margin-left: 0;}

    /* support safari mobile > text ellipsis line-clamp:3  */
    .q-viewmore-desc .descriptionPreview { white-space: pre-line; }
    .descriptionPreview * { display: inline; white-space: pre-line; }

    /* footer survey preview */
    .q-form-question-footer .q-form-question-footer-btn-group-position { padding: 8px 0;}
    .q-form-question-footer [all-page="1"] .q-form-question-footer-btn-next-back { width: 100%;}
    .q-form-question-footer [all-page="1"] .q-form-question-footer-btn-next-back .designerTool { flex: 0 0 100%;}
    .q-form-question-footer .q-form-question-footer-btn-next-back button { margin-right: 16px;}
    .c-style .q-form-question-footer-page-of .q-btn-page-of { height: var(--btn-md-height); min-width: 52px; border-radius: 4px; }


    /* survey inbox */
    .resetIframe .q-form-question-footer .q-form-question-footer-btn-group-position { padding: 8px 16px;}
    .resetIframe [data-previewmode="N"] .q-listgroup-question { padding: 16px;}
    .resetIframe .divFormEnd[data-state="end"] { padding: 16px;}


}

@media(max-width:420px) {
    .q-cover-media { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;}
}