*{
    padding: 0;
    margin: 0;
}

body {
    height: 100%;
    font-size: 18px;

}

.bg{
    min-height: 100vh;
}


.red 
{
    color:red;
}
/* 作答頁面 */
.StudentHeader{
    /* 0813改：貼近prototype的考試資訊列，淺褐底+深色字，取代原本深色底+白字。字級維持原本大小(20px)不縮小，改用移走「提前結束考試」欄位來縮減整體高度 */
    background-image: none;
    background-color: #e8dcc8;
    border-bottom: 2px solid #c9b99a;
    color: #333;
    padding: 20px 0;
    margin-right: 0;
    font-size: 20px;
}

.StudentHeader .highlight.yellow, .StudentHeader .highlight.green{
    /* 0813改：原本的淺黃/亮綠在深色底才看得清楚，淺褐底改用品牌綠 */
    color: #5D8D70;
}

.row.info{
    padding: 8px 0px;
}

.row.info > span{
    /* 0813新增：欄位間距拉寬，貼近prototype的.exam-info-bar欄距，不動display避免影響Bootstrap原本的flex排版 */
    padding-right: 24px;
}

.dropdown-menu.custom-dropdown-menu {
    width: 100% !important;
}

.dropdown-menu {
    min-width: 0px;
}

.btn.btn-light.btn-sm.mx-2.examButton{
    /* 03/22新增 */
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

.btn.btn-light.btn-lg.mx-2.examButton {
    /* 03/22新增 */
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

/* 0813新增：題型徽章(單選題等)跟作答總覽鈕改回品牌深綠色，用ID鎖定只影響這兩顆按鈕，不動其他頁面共用的.examButton */
#M_SM{
    background-color: #5D8D70 !important;
    border-color: #4a7a5e !important;
    color: #fff !important;
}

#btnPreview{
    background-color: #5D8D70 !important;
    border-color: #4a7a5e !important;
    color: #fff !important;
}

#btnPreview:hover{
    background-color: #4a7a5e !important;
    color: #fff !important;
}

/* 0817新增：練習頁(EmuTest.aspx/ExamMager_EmuTest2.aspx)的作答總覽鈕id是btnQuery而非btnPreview，補上同一組品牌綠，讓正式/練習兩邊顏色一致 */
#btnQuery{
    background-color: #5D8D70 !important;
    border-color: #4a7a5e !important;
    color: #fff !important;
}

#btnQuery:hover{
    background-color: #4a7a5e !important;
    color: #fff !important;
}

/* 0813新增：標記此題按鈕，照prototype的樣式(星號+文字+外框) */
.q-flag-btn{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 18px;
    padding: 6px 14px;
    border-radius: 4px;
    border: 2px solid #ccc;
    background: #f8f8f8;
    vertical-align: middle;
    transition: all 0.15s;
    font-weight: 600;
    color: #999;
}

.q-flag-btn:hover{
    border-color: #d4a843;
    color: #d4a843;
}

.q-flag-btn.active{
    border-color: #d4a843;
    background: #fff8e1;
    color: #b8860b;
}

.q-flag-btn .star{
    font-size: 1.6rem;
    line-height: 1;
}

/* 0813新增：標記題目後在題目上方顯示的提示banner，照prototype的.q-flagged-banner */
.q-flagged-banner{
    background: #fff3cd;
    border: 2px solid #d4a843;
    border-radius: 4px;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
}

.Practice{
    /* 03/22新增 */
    background-color: #eea252;
    display: flex; 
    padding: 8px;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
}

/* 0813新增：正式考試狀態列(Examination.aspx用，跟EmuTest.aspx的.Practice是同類型但情境不同，避免共用同一個class名稱造成混淆) */
.examStatusBar{
    background-color: #d4a843;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
}

.highlight.yellow{
    /* 03/22新增 */
    color: #ffd1a0;
}
.highlight.green{
    color: #7DFD92;
}

.col.question{
    margin: 40px 0px;
    font-weight: bold;
}

/* 0813新增：選項外面包一層白底邊框卡片，貼近prototype的.options-box */
.choice{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 16px 20px;
}

.form-check{
    /* 0813改：原本用底色區分單雙數選項，改成貼近prototype的下邊框分隔+hover提示 */
    background-color: transparent;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    padding: 20px 0px;
    padding-left: 100px;
    display: flex;
    align-items: center;
    margin: 0%;
    font-size: 28px;
}

.form-check:hover{
    background-color: #f5f9f6;
}

.form-check.gray{
    background-color: transparent;
}

.form-check-label{
    margin-left: 10px;
    width:94%;
}
.form-check-input {

    width:30px;
    height:30px;
}
.footer.fixed-bottom {
    padding: 1em 0px;
    /* 0813改：貼近prototype的底部操作列，淺褐底取代原本深色底 */
    background-color: #e8dcc8;
    border-top: 2px solid #c9b99a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn.btn-light.btn-sm.footer,.btn.btn-light.btn-sm.mx-2.footer{
    font-size: 20px;
    padding: 8px 20px;
    /* 0813改：原本陰影浮起效果改成扁平有邊框，貼近prototype按鈕質感 */
    border: 2px solid #999 !important;
    box-shadow: none;
}

/* 0813新增：交卷鈕，紅底白字，跟其他底部按鈕的灰邊框樣式區隔開來 */
.btn.btn-sm.footer.btn-submit-exam{
    font-size: 20px;
    padding: 8px 20px;
    background-color: #c0392b;
    border: 2px solid #a93226 !important;
    color: #fff;
    box-shadow: none;
}

.btn.btn-sm.footer.btn-submit-exam:hover{
    background-color: #a93226;
    color: #fff;
}

.leave.modal-body{
    display: flex;
    justify-content: center;
    margin: 50px 0px;
    color: red;
}

.btn.btn-light.btn-sm.col-md-3, .btn.btn-light.btn-sm.col-md-3.offset-md-1{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 作答總覽 */
.table.table-bordered {
    text-align: center;
    table-layout: fixed; /* 固定欄位寬度 */
}

.modal-title{
    margin: 0.2em 0px;
}

.NoAnswer{
    /* 0813改：作答狀況表未作答格，原本淺藍改淺綠，貼近prototype配色 */
    background-color: #d5e8d4;
}

.bluecol{
    /* 0813改：表頭(題號/作答)原本茶青色改品牌深綠色 */
    background-color: #5D8D70 !important;
    color: #fff;
}

.whitecol{
    background-color: #fff !important;
}

.currentcol{
    /* 0910改：改用logo藍色區隔，並將class從orangecol改名成currentcol(顏色已不是橘色) */
    background-color: rgb(36, 121, 184) !important;
    color: #fff;
}

/* 0813新增：作答總覽表，題號格固定淺綠底黑字(不受標記/作答狀態影響)，照prototype的.q-num */
.numcol{
    background-color: #d5e8d4 !important;
    color: #000 !important;
}

/* 0813新增：作答總覽表，作答格預設(未作答)深一點的綠，照prototype的.q-ans.unanswered */
.unansweredcol{
    background-color: #b5d8b5 !important;
}

/* 0813新增：作答總覽表，已標記題目的題號格(黃底)，照prototype的.q-num.flagged，用組合選擇器確保蓋過.numcol */
/* 0910改：右上角星號太小已拿掉，只保留黃底 */
.numcol.flaggedcol{
    background-color: #fff3cd !important;
    position: relative;
}

/* 0813新增：作答總覽下方說明文字裡的顏色小方塊，顏色對齊實際使用的.unansweredcol/.currentcol/.flaggedcol */
.ao-note .green-sq{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #b5d8b5;
    border: 1px solid #8ab88a;
    vertical-align: middle;
    margin: 0 4px;
}

.ao-note .current-sq{
    /* 0910改：顏色比照.currentcol，class從orange-sq改名成current-sq */
    display: inline-block;
    width: 14px;
    height: 14px;
    background: rgb(36, 121, 184);
    border: 1px solid #1f5a86;
    vertical-align: middle;
    margin: 0 4px;
}

.ao-note .yellow-sq{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #fff3cd;
    border: 1px solid #d4a843;
    vertical-align: middle;
    margin: 0 4px;
}

/* 0813新增：交卷確認彈窗，仿prototype的.submit-box */
.examSubmitOverlay{
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    align-items: center !important;
    justify-content: center !important;
}

.examSubmitOverlay.show{
    display: flex !important;
}

.examSubmitBox{
    background: #fff;
    border-radius: 6px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    margin: auto;
}

.examSubmitBox h3{
    margin-bottom: 12px;
    color: #333;
    font-size: 22px;
    font-weight: 700;
}

.examSubmitBox p{
    margin-bottom: 12px;
    color: #555;
    font-size: 17px;
    white-space: pre-line;
}

.examSubmitBox p.examSubmitFlagWarn{
    display: none;
    color: #b8860b;
    font-weight: 700;
    font-size: 14px;
}

.examSubmitBtnRow{
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.examSubmitConfirm{
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 28px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.examSubmitConfirm:hover{
    background: #a93226;
    color: #fff;
}

.examSubmitCancel{
    background: #888;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 28px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.examSubmitCancel:hover{
    background: #666;
    color: #fff;
}

/* 0813新增：交卷最終確認彈窗，紅色外框強調風險，仿prototype的overlay-submit2 */
.examSubmitBoxFinal{
    border: 3px solid #c0392b;
}

.examSubmitFinalIcon{
    font-size: 2.5rem;
    color: #c0392b;
}

.examSubmitFinalTitle{
    color: #c0392b !important;
}

.examSubmitFinalText{
    font-weight: 600 !important;
}

.continue{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:2rem;
}

.btn.btn-secondary.continue{
    /* 0813改：原本茶青漸層改品牌深綠色，跟作答狀況表的表頭配色一致 */
    background: #5D8D70;
    color: #fff;
    margin: 30px 0px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

.btn.btn-secondary.continue:hover{
    background: #4a7a5e;
    color: #fff;
}

.footer header.col-md-4.offset-md-4z{
    margin: 20px 0px;
}

.footer.col-md-4.offset-md-4{
    margin-bottom: 50px;
}

/* 登入頁面 */

.StudentLogo{
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

/* 0813新增：登入頁頂部機構/系統名稱列，取代原本的Logo圖片 */
.sys-header {
    background-image: linear-gradient(90deg, #5D8D70 40%, #93C4A7 100%);
    color: #fff;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sys-header .title-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sys-header .org-name {
    font-size: 14px;
    color: #fff;
}

.sys-header .sys-name {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

/*img{
    height: 60px;
}*/

.notice.col-md-6.offset-md-3, .notice.col-lg-6.offset-lg-3, .signin.col-md-6.offset-md-3, .signin.col-lg-6.offset-lg-3 {
    /* 0910改：寬度改用百分比+上限，做法比照keypad-inline(width:100%+max-width)，
    不再單靠Bootstrap col-lg-6在992px斷點跳變寬度，兩個框才能維持一致寬度 */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px 28px;
    margin-top: 1em;
    width: 90%;
    max-width: 800px;
}

.notice.col-md-6.offset-md-3, .notice.col-lg-6.offset-lg-3 {
    margin-top: 2em;
}

.notice.col-md-6.offset-md-3 ol, .notice.col-lg-6.offset-lg-3 ol {
    padding-left: 20px;
    line-height: 2;
    font-size: 0.92rem;
    color: #333;
}

/* 只在注意事項框內生效，不影響ViewScores.aspx/MDefault.aspx共用的.highlight.red/.highlight.blue */
.notice.col-md-6.offset-md-3 .highlight.red, .notice.col-lg-6.offset-lg-3 .highlight.red {
    color: #c00;
    font-weight: 700;
}

.notice.col-md-6.offset-md-3 .highlight.blue, .notice.col-lg-6.offset-lg-3 .highlight.blue {
    color: #0066cc;
    text-decoration: underline;
}

/* 0813新增：登入表單框內容置中、標籤加粗、輸入框改綠色系邊框，貼近prototype */
.signin.col-lg-6.offset-lg-3 {
    /* 0910改：拿掉自己的max-width:600px，寬度跟上面.notice(info框)共用同一組800px上限 */
    text-align: center;
}

.signin .col-form-label {
    font-weight: 600;
    white-space: nowrap;
}

.signin .form-control {
    border: 2px solid #999;
    border-radius: 4px;
    text-align: center;
    font-size: 1.1rem;
}

.signin .form-control:focus {
    border-color: #5D8D70;
    box-shadow: none;
}

.notice-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1rem;
}

/* 0326新增 */
/* 0813改：舊藍綠色統一改成品牌深綠色 */
.btn.btn-primary.cyan{
    border-color: #4a7a5e  !important;
    background-color: #5D8D70 !important;
}

.btn.btn-primary.cyan:hover{
    border-color: #4a7a5e !important;
    background-color: #4a7a5e !important;
    color: #fff;
}

.signinButton{
    margin: 10px 2px;
    display: flex;
    justify-content: space-between;
}

.signinButton button{
    padding: 6px 5px;
}

.modal-footer button, .modal-footer.btn.btn-primary{
    padding: 6px 35px;
}

.highlight.red{
    color: red;
}

.highlight.blue{
    color: #337AB7;
}

.btn.btn-primary.lightblue{
    background-color: #E5EEF2;
    color: #333333;
    border: none;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.25) ;
}

.btn.btn-primary{
    background-color: #337AB7;
    border: none;
}

.btn.btn-secondary{
    border: none;
}

.leave{
    float: right;
}

.leave.btn.btn-danger{
    float: right;
    margin: 30px 50px;
}

.modal-header{
    /* 0326新增 */
    /* 0813改：舊藍綠色統一改成品牌深綠色 */
    background-color: #5D8D70;
    color: #fff;
}

.left_col {

    /*padding-left:38%;*/
}
 /* 0326新增 */
.modal-footer.btn.btn-primary.cyan , .btn.btn-secondary.cancel{
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

.studentinfo{
    display: inline-block;
    width: 6em;
    text-align: justify;
    text-align-last: justify;
}

.info.col-md-8.offset-md-2 , .info.col-lg-8.offset-lg-3 {
    margin-top: 20px;
}

.modal-content {
    width: 100%;
    margin: 12em auto;
}

/* 系統訊息(AlertX/ConfirmX)用的是真正的Bootstrap .modal，上面那條margin:12em auto會讓它明顯偏下，這裡單獨蓋掉 */
#ezAlerts .modal-content {
    margin: 0 auto;
}

.modal-body {
    width: 100%;
    /*max-height: 300px;
    min-height: 150px;
    height: 27%;*/
    padding: 2em 3em;
}
.modal-footer{
    display: flex;
    justify-content: center;
}

/* 考生考完試的離場訊息 */
   
.message-box {
    background-color: #f0f0f0; /* 淺灰色背景 */
    color: #940000; /* 黑色文字 */
    font-size:1.2em;
    font-weight:bold;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    margin:3em 0;
}
.overall {
    display: flex;
    flex-wrap: wrap; /* 允許子元素換行 */
}

    .overall span {
        flex: 1; /* 該span在可用空間內自行調整 */
        white-space: nowrap; /* 禁止内容斷行 */
    }


/* 成績單專用 (viewscore */

.examinfo {
    font-size: 1.75em;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5em;
}

.scorelogo {
    margin: 20px 0;
    width: 40%;
    max-width:700px;
    min-width:500px;
}

.form-control {
    max-width: 200px;
}
td.score {
    min-width: 90px;
    text-align: center;
}
    td.score.info {
        width: 5%;
    }

    td.score.note {
        text-align:left;

    }

    td.score.bold {
        font-weight:bolder;
    }

    td.score.note {
    }

@media(max-width:1700px){
    .signinButton button{
        padding: 6px 35px;
    }
    .keypadzone {
        max-width: 600px;
    }

}

@media(max-width:1450px){
    .signinButton button{
        padding: 6px 25px;
    }
    .keypadzone {
        max-width:500px;
    }
    td.score {
        font-size: 0.9em;
    }
    table.anslist {
        width:80%;
    }

    .left_col {
        /*padding-left: 20%;*/
    }
}

@media(max-width:1200px) {
    .signinButton button {
        padding: 6px 20px;
    }

    .keypadzone {
        max-width: 500px;
    }

    .col-form-label {
        font-size: 0.9em;
        padding: 1em;
    }

    .col-lg-4 {
        font-size: 0.95em;
    }

    .overall {
        flex-direction: row;
    }

    table.anslist {
        font-size: 0.95em;
    }

    td.score {
        font-size: 0.9em;
    }

    .footer.fixed-bottom {
        padding: 1em 0;
    }
    .remark{
        font-size: 0.9em;
    }
}
@media(max-width:1024px){
    .signinButton button{
        padding: 6px 10px;
    }
    .keypadzone {
        max-width: 500px;
    }
    .col-form-label {
        font-size: 0.87em;
        padding: 0.1em;
    }

    .col-lg-4 {
        font-size:0.87em;
    }
    .overall {
        flex-direction: row;
    }
    table.anslist{
        font-size: 0.8em;
    }

    .left_col {
       /* padding-left: 10%;*/
    }

    .remark {
        font-size: 0.9em;
    }
/*
    .modal-content {
        width: 90%;
        margin: 1em auto;
        font-size:.85em;
    }*/
}