/* [page="p/p4294967374/PMSCalibrationForm"] #tab-columnview .divSectionList {
    overflow: auto;
    width: 100%;
    display: flex;
} */
[page="p/p4294967374/PMSCalibrationForm"] #tab-columnview .divSectionItem {
    /* max-width: 298px; */
}
.c-css-calibation td.tdItem [hascomment] [data-state] {
    display: none;
}
.c-css-calibation td.tdItem [hascomment="1"] [data-state="comment"] {
    /* display: block; */
    display: grid; /* support style in column */
}
.c-css-calibation td.tdItem [hascomment="0"] [data-state="empty"] {
    display: block;
}

.c-css-calibation .c-todo-heading.pmsReviewHeading[style*="none"] ~ .c-content-group .dataTables_scrollHead { top: 0; }

#divPortal .c-css-calibation .dataTable [data-type="decimal"], 
#divPortal .c-css-calibation .dataTable [data-type="percent"]{ text-align: right; }
#divPortal .c-css-calibation .dataTable [data-type="decimal"] span, 
#divPortal .c-css-calibation .dataTable [data-type="percent"] span{ padding-right: 0 !important; }

[page*="PMSCalibrationForm"] .c-content-group { align-items: normal;}
.c-css-calibation .c-page-group-single .c-content-body { max-width: 100%; display: flex; flex-direction: column;}
.c-css-calibation .c-page-group.c-page-group-single { height: 100%;}
.c-css-calibation .divItemList.tab-content,
.c-css-calibation .tab-content .tab-pane{ height: 100%;}

.c-css-calibation .c-intro-text-only { color: #888888; font-size: 10px; padding: 12px 0; text-align: center;}

.c-style .c-css-calibation .dataTables_wrapper .q-datatable.dataTable thead > tr > th.no-sort.text-right span, 
.c-style .c-css-calibation .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th.no-sort.text-right span, 
.c-style .c-css-calibation .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th.no-sort.text-right span,
.c-css-calibation .no-sort.text-right span { padding-right: 0;}

.c-section-calibration-title { display:flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px;} 
.c-section-calibration-title .nav-tabs { max-width: fit-content;}
.c-section-calibration-title .c-datalayout-action { padding: 6px;}
.c-section-calibration-title .c-datalayout-action[style*="none"] + .c-separate { display: none;}
.c-calibration-title-menu-right { justify-content: flex-end;}
.c-calibration-title-menu-right li.nav-item { border-radius: 6px; border: 1px solid #E3E6E8; }
.nav-tabs.c-calibration-title-menu-right .nav-link:hover { background: var(--secondary-hover-bg);}
.c-style .nav-tabs.c-calibration-title-menu-right .nav-link { border: 0; padding: 9px; font-size: 14px; height: auto; color: #545555; }
.q-style .nav-tabs.c-calibration-title-menu-right { border-color: transparent; gap: 8px; overflow: visible; }  
.q-style .nav-tabs.c-calibration-title-menu-right .c-badgeCnt { display: flex ; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 16px; background: #0E2289; color: #ffffff; font-size: 11px; line-height: 18px; font-weight: bold; position: absolute; top: -5px; right: -8px;}
.q-style .nav-tabs.c-calibration-title-menu-right .c-badgeCnt:empty { display: none;}

/* Dashboard */
.c-calibration-dashboard,
.c-table-calibration-dashboard-summary { border-radius: 12px; border: 1px solid #E3E6E8; padding: 20px; }
.c-calibration-dashboard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.c-label-title { font: var(--typo-page-subtitle); color: var(--default);}
.c-css-calibation .d-reportchart-body canvas { height: 100% !important; width: 100%;}
.c-calibration-dashboard .tab-content { height: 100%;}
.c-css-calibation .d-reportchart-body {  max-width: 900px; margin: 0 auto;}

.c-calibration-dashboard-summary { margin-top: 32px;}
.c-title-dashboard-summary { min-height: 40px; display: flex; align-items: center; text-align: left; font: var(--typo-bold-body-xl); margin-bottom: 12px; }
.c-calibration-dashboard-summary .dataTables_wrapper { max-width: 686px; margin: 0 auto;}
.c-calibration-dashboard-summary .q-datatable.dataTable .negative { color: #E73C16;}
.c-style .tab-pane .c-calibration-dashboard-summary .q-datatable.dataTable > thead > tr > th[data-type="percent"] { width: 56px; min-width: 56px; max-width: 56px;}
.c-style .c-calibration-dashboard-summary .q-datatable.dataTable [data-type="total"] { text-align: right;}
.c-style .c-calibration-dashboard-summary .q-datatable.dataTable tbody > tr:last-child td { background: rgba(239, 242, 244, 0.50);}
.c-style .c-calibration-dashboard-summary .q-datatable.dataTable tbody td { border: 1px solid #E3E6E8 !important;}

.c-target { border-radius: 12px; border: 1px solid #E3E6E8; overflow: hidden; }
.c-target-list { border-bottom: 1px solid #E3E6E8; display: grid; grid-template-columns: minmax(150px, 1fr) 1fr;}
.c-target-list:last-child { border-bottom: 0;}
.c-target-list .c-target-col { padding: 7px 20px; font: var(--typo-bold-body-md); text-align: right; white-space: nowrap;}
.c-target-list .c-target-col:first-child { border-right: 1px solid #E3E6E8; font: var(--typo-body-md); padding-right: 12px; text-align: left; }

.c-show-target { display: flex; gap: 16px; align-items: flex-start;}
.c-show-target .tab-pane { flex-grow: 1; min-width: 0;}
.c-difference { background: rgba(0, 192, 101, 0.10); color: #00C065;}
.c-difference.negative { background: rgba(231, 60, 22, 0.10); color: #E73C16;}


/* list view */
.c-column-employee { display: grid; grid-template-columns: 1fr auto; gap: 12px;}
.c-column-employee[data-column="3"] { grid-template-columns: 1fr 1fr auto; }
.c-column-employee .custom-checkbox { align-items: center;}
.c-column-employee .media { display: grid; grid-template-columns: auto minmax(158px, 1fr); align-items: center;}
.c-column-employee .media .user_img,
.c-column-employee .media .comment_img { width: 32px; height: 32px; overflow: hidden; border-radius: 50%; grid-row: 1 / span 2; margin-right: 10px; border: 1px solid rgba(216, 216, 216, 0.5); }
.c-column-employee .media .user_img img,
.c-column-employee .media .comment_img img { width: 100%;}
.c-column-employee .media [data-fld^="employee_"],
.c-column-employee .media [data-fld^="comment_"],
.c-column-employee .media [data-fld^="user_"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #545555;}
.c-column-employee .media [data-fld^="comment_"]
.c-column-employee .media [data-fld="user_detail"],
.c-column-employee .media [data-fld="user_rating"] ,
.c-performance-level { color: #545555;}
.c-column-employee .media [data-fld="employee_name"],
.c-column-employee .media [data-fld="comment_name"] { width: 100%; font: var(--typo-bold-body-lg); color: var(--default);}
.c-column-employee [data-state="empty"] span[class^="lbl_"],
.c-column-employee [data-hascomment="0"] span[class^="lbl_"] { color: #a7a9ab;}

[data-fld="finalIndicator"] + .btn.btnGradeChg,
button.btn-can-edit { margin-left: 4px;}
/* comment in table */
.c-comment-box { max-width: 268px;}
.c-comment-box .c-column-employee { grid-template-columns:1fr auto; border-radius: 8px; border: 1px solid #E3E6E8; padding: 4px 8px; align-items: center; min-height: 48px; }
.c-comment-box .c-column-employee .media { grid-template-columns: minmax(158px, 1fr);}
.c-comment-box[hascomment="1"] .c-column-employee { border-color: #EFF2F4; background: #EFF2F4;}

.dataTables_scrollHeadInner { min-width: 100%;}
/* df */
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th[data-type],
.c-style .q-datatable.dataTable > thead > tr > th[data-type] { min-width: 76px; max-width: 180px; }
/* edit */
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.chgPer,
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.chgAmt,
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.chgSpe,
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.chgAmt{ min-width: 100px;}
/* detail */
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.emName,
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.companyName,
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.salaryRange,
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.b2Name{ min-width: 150px;}
/* dtfc-fixed-left */
.c-style .tab-pane .q-datatable.dataTable > thead > tr > th.dtfc-fixed-left,
.c-style .tab-pane .q-datatable.dataTable > tbody > tr > td.dtfc-fixed-left{ max-width: unset;}


/* select option */
.c-option-modal { max-width: 380px; width: 100%; margin: 0 auto; padding-top: 24px; padding-bottom: 12px; display: flex; flex-direction: column; gap: 16px;}
.c-option-modal button { width: 100%;}
.modal.c-modal[data-mode="profile"] .modal-dialog,
.modal.c-modal[data-mode="review"] .modal-dialog { max-width: 1237px; height: 80%; }
.modal.c-modal[data-mode="profile"] .modal-content,
.modal.c-modal[data-mode="review"] .modal-content { height: 100%; overflow: hidden; max-height: 100%;}
.modal.c-modal[data-mode="profile"] .divDetail,
.modal.c-modal[data-mode="review"] .divDetail { width: 100%; height: 100%; /*overflow: hidden;*/ }
.modal.c-modal[data-mode="profile"] .modal-body,
.modal.c-modal[data-mode="review"] .modal-body { padding: 0; overflow: visible; } 
.modal.c-modal[data-mode="profile"] .c-option-modal,
.modal.c-modal[data-mode="review"] .c-option-modal { display: none;}

.modal.c-modal[data-mode="profile"] .modal-title,
.modal.c-modal[data-mode="review"] .modal-title { display: none;}
.modal.c-modal[data-mode="profile"] .modal-header,
.modal.c-modal[data-mode="review"] .modal-header { padding-bottom: 0px !important;}
.modal.c-modal[data-mode="profile"] iframe,
.modal.c-modal[data-mode="review"] iframe { border: 0 !important;}
.c-css-calibation iframe { border: 0; /*box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15); border-radius: 8px; margin: auto;*/} 
.c-title-review-name { display: none; font: var(--typo-page-subtitle); color: var(--primary); }
.modal.c-modal[data-mode="review"] .c-title-review-name { display: block;}

/* column view */
.c-calibration-column-view { padding: 12px 12px 8px 12px; border-radius: 12px; border: 1px solid #E3E6E8; width: 100%; height: 100%; max-height: calc(var(--screen-height) - 224px);}
.c-calibration-column-view .divSectionList {display: flex; gap: 8px; overflow: auto; height: 100%; overflow-x: auto;}
.c-calibration-column-view .c-column-employee { border-radius: 8px; border: 1px solid #E3E6E8; background: #ffffff;}
.c-calibration-column-view .c-column-employee .media { align-items: flex-start;}
.c-calibration-column-view-list { min-width: 232px; border: 1px solid #E3E6E8; border-radius: 8px; background: #F7F9FA; display: flex; flex-direction: column; overflow: hidden; position: relative;}
.c-calibration-column-view  .c-column-employee .media [data-fld="user_detail"],
.c-calibration-column-view  .c-column-employee .media [data-fld="user_rating"] ,
.c-calibration-column-view  .c-performance-level { font-size: 10px;}

.c-section-item { padding: 8px 10px 8px 16px; display: flex; flex-direction: column; border-bottom: 1px solid #E3E6E8;}
.c-section-title { font-size: 13px; line-height: 20px; font-weight: bold;}
.c-section-detail { display: flex; gap: 6px; font:var(--typo-body-sm); }
.c-section-detail .negative { color: #E73C16;}
.c-section-detail .color-grey { color: #545555;}

.c-calibration-column-group { padding: 4px; display: grid; grid-gap: 4px; height: 100%; align-content: flex-start; overflow: auto;}
/* .c-calibration-column-group:hover { background: #A7A9AB;} */
.c-calibration-column-group .c-column-employee { padding: 3px 6px 3px 14px; position: relative; grid-template-columns: 1fr auto; gap: 8px; align-items: flex-start;}
.c-calibration-column-group .c-column-employee:hover { border: 1px solid #A7A9AB;}
.c-calibration-column-group .c-column-employee .media { grid-template-columns: auto minmax(1px , 1fr);}
.c-calibration-column-group .c-column-employee button.btnOption { margin-top: 1px; height: 26px; min-width: 28px;}
.c-column-employee .grabZone { position: absolute; z-index: 1; font-size: 12px; color: #A7A9AB; top: 7px; left: 2px; cursor: grab; display: none;}
.c-column-employee:hover .grabZone { display: block;}
.c-calibration-column-group .c-column-employee .media [data-fld="user_name"] { width: 100%; font: var(--typo-bold-body-md); color: var(--default);}
.c-column-employee .media .fld_media { width: 24px; height: 24px; overflow: hidden; border-radius: 50%; grid-row: 1 / span 3; margin-right: 6px; margin-top: 5px; border: 1px solid rgba(216, 216, 216, 0.5); display: flex; align-items: center; justify-content: center; }
.c-column-employee .media .fld_media img { width: 100%; height: 100%; }

.c-calibration-column-view .HI[draggable="true"] .c-column-employee { border-radius: 8px; border: 1px solid #A7A9AB; background: #EFF2F4; box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.20);}

/* draggable-grapzone */
.draggable-grapzone .c-column-employee { border: 1px solid #545555; background: #EFF2F4;}
.draggable-grapzone .c-column-employee .media [data-fld="user_detail"], 
.draggable-grapzone .c-column-employee .media [data-fld="user_rating"], 
.draggable-grapzone .c-performance-level { color: #131313;}

/* calibration empty */
.c-calibration-empty { border-radius: 12px; border: 1px solid #E3E6E8; padding: 20px; background: #ffffff;}
.c-calibration-empty .c-label-title { margin-bottom: 24px;}
.c-bg-blue-empty { color: #386BF6; font: var(--typo-section-subtitle); padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 330px; background: #F0F3F8; border-radius: 8px;}

/* ใส่กรณีที่ column น้อย ข้อมูลครบค่อยเอาออก */
.c-max-column > span { max-width: 120px; text-align: right; padding-right: 0 !important; width: 100%; display: block;}


/* Group Evaluation  */
.c-info-header { max-width: 746px; width: 100%; display: grid; gap: 0 88px; grid-template-columns: repeat(2, 1fr);}
.c-info-header-list { display: grid; grid-template-columns: minmax(128px, auto) 1fr; gap: 8px }
.c-info-header-list .c-info-header-title { color: #545555; font: var(--typo-bold-body-lg);}

.c-images-user { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-top: 2px;}
.c-images-user img { width: 100%; object-fit: cover;}

/* table Group Evaluation  */
.c-style .q-datatable.c-table-group-evaluation.dataTable > thead > tr > th { padding: 8px 10px; }
.c-style .q-datatable.c-table-group-evaluation.dataTable > thead > tr > th[data-type="rating"] { width: 92px !important; min-width: 92px; max-width: 92px; }
.c-style .q-datatable.c-table-group-evaluation.dataTable > tbody > tr > td { padding: 4px 10px; }
.c-style .q-datatable.c-table-group-evaluation.dataTable > thead > tr > th:first-child, 
.c-style .q-datatable.c-table-group-evaluation.dataTable > tbody > tr > td:first-child { padding-left: 16px;} 
.c-style .q-datatable.c-table-group-evaluation.dataTable > thead > tr > th:last-child, 
.c-style .q-datatable.c-table-group-evaluation.dataTable > tbody > tr > td:last-child { padding-right: 16px;} 
/* .emServiceYear { border-right: 1px solid var(--table-line);} */
.c-style .dataTables_wrapper .q-datatable.dataTable thead > tr > th:not(.sorting) span { padding: 0;}
.c-style .q-datatable.dataTable > thead > tr > th.overallComment { width: auto; min-width: 268px; max-width: 100%; }
.c-style .q-datatable.dataTable > thead > tr > th.emImg,
.c-style .q-datatable.dataTable > tbody > tr > td.emImg { width: 44px; min-width: 44px; max-width: 44px; padding-right: 0; }
.c-style .q-datatable.dataTable > thead > tr > th.emCode,
.c-style .q-datatable.dataTable > tbody > tr > td.emCode { width: 88px; min-width: 88px; max-width: 88px; }
.c-style .q-datatable.dataTable > thead > tr > th.emName,
.c-style .q-datatable.dataTable > tbody > tr > td.emName { width: 112px; min-width: 112px; max-width: 112px; }
.c-style .q-datatable.dataTable > thead > tr > th.emJobRole { width: 88px; min-width: 88px; max-width: 88px; }
.c-style .q-datatable.dataTable > thead > tr > th.emLevel { width: 80px; min-width: 80px; max-width: 80px; }
.c-style .q-datatable.dataTable > thead > tr > th.overallRating { width: 60px; min-width: 60px; max-width: 60px; text-align: right;}
.c-style .q-datatable.dataTable > thead > tr > th.emServiceYear { width: 60px; min-width: 60px; max-width: 60px; }
.c-style .q-datatable.dataTable > tbody > tr > td.emImg { padding-right: 0;}
.c-style .q-datatable.dataTable > tbody > tr > td.emCode > span,
.c-style .q-datatable.dataTable > tbody > tr > td.emName > span,
.c-style .q-datatable.dataTable > tbody > tr > td.emJobRole > span,
.c-style .q-datatable.dataTable > tbody > tr > td.emLevel > span,
.c-style .q-datatable.dataTable > tbody > tr > td.emServiceYear > span,
.c-style .q-datatable.dataTable > tbody > tr > td > span { padding-top: 5px;}
td.overallRating span[data-fld="overallRating"] { padding-top: 5px; display: block; text-align: right;}
td.emName span[data-fld="emName"] { font-weight: bold;}
.c-comment-question { display: flex; gap: 4px; align-items: baseline; color: #545555; margin-top: 1px; width: 100%; cursor: pointer;}
.c-comment-question i { font-size: 10px;}
.c-comment-question .comment { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--typo-body-md) ;}
.c-spinner-question { padding: 3px 4px 2px; border-radius: 6px; border: 1px solid #E3E6E8; background: #ffffff; width: 92px;}
.c-spinner-question[data-changerating="1"] { background: rgba(252, 193, 106, 0.20); }
/* .q-style .c-spinner-question { width: 120px; min-width: 120px;} */
.q-style .c-spinner-question .input-group .form-control { border: 1px solid var(--form-control-border); height: 23px; border-radius: 6px;}
.q-style .c-spinner-question .input-group .downNumber + .form-control { border-radius: 0;}
.q-style .c-spinner-question .input-group-prepend .btn, 
.q-style .c-spinner-question .input-group-append .btn { min-width: auto; width: 23px; height: 23px; padding: 8px 7px 7px 8px; display: flex; align-items: center; border-color: var(--form-control-border); background: var(--form-control-hover-bg);}
.q-style .c-spinner-question .input-group-prepend .btn { border-right: 0;}
.q-style .c-spinner-question .input-group-append .btn { border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.q-style .c-spinner-question .input-group-prepend .btn i, 
.q-style .c-spinner-question .input-group-append .btn i { font-size: 8px; line-height: 12px;}
.q-style .c-spinner-question:not(.form-danger) .input-group.c-number-spinner:focus-within .input-group-prepend button,
.q-style .c-spinner-question:not(.form-danger) .input-group.c-number-spinner:focus-within .input-group-append button,
.q-style .c-spinner-question:not(.form-danger) .input-group.c-number-spinner:focus-within .form-control { border-color: var(--form-control-focus-border);}
.q-style .c-spinner-question .input-group.c-number-spinner .form-control:disabled { border-color: transparent !important; background: none !important; text-align: left !important; font-weight: bold;}
.q-style .c-spinner-question.form-danger .c-comment-question { display: none;}
.q-style .c-spinner-question.form-group .text { font: var(--typo-body-sm); margin-top: 2px; gap: 4px;}

.q-style .c-spinner-question .form-control:hover:not(:focus), 
.q-style .c-spinner-question .form-control:hover:not(:focus) + .input-group-append .btn { border-color: var(--form-control-border);}

.q-style .c-spinner-question.form-danger .input-group.c-number-spinner .downNumber + input[type="number"].form-control { border-left-color: var(--form-control-focus-border) !important; border-right-color: var(--form-control-focus-border) !important;}

/* data 2 line ellipsis */
.c-style .dataTables_wrapper .q-datatable.c-table-group-evaluation.dataTable thead > tr > th span,
.c-style .q-datatable.c-table-group-evaluation.dataTable > tbody > tr > td > span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;}

/* Modal Group Evaluation - comment */
.modal.c-modal#commentModal .modal-dialog,
.modal.c-modal#overallCommentModal .modal-dialog { max-width: 617px; max-height: 80%; }
.c-modal-form-comment { display: flex; min-height: 181px; width: 100%; }
.c-modal-form-comment .content-left { width: 160px; min-width: 160px; border-right: 1px solid #E3E6E8; padding-right: 12px; }
.c-modal-form-comment .content-right { padding-left: 16px; flex-grow: 1; }
.c-employee-comment { display: block; }
.c-employee-comment .user_img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: block; margin-bottom: 4px; border: 1px solid #E3E6E8;}
.c-employee-comment .user_img img { width: 100%; object-fit: cover;}
.c-employee-comment [data-fld="user_name"] { display: block; color: #131313; font: var(--typo-bold-body-lg); margin-bottom: 4px;}
.c-info-employee { display: block; margin-bottom: 2px; color: #131313; font: var(--typo-body-lg);}
.c-info-employee-title { color: #A7A9AB; font: var(--typo-body-md);}
.c-comment-title-question { font-size: 13px; line-height: 20px; display: block; margin-bottom: 16px;}
.c-comment-title-question [data-fld="short_title"] { font: var(--typo-bold-body-lg);}
.c-comment-input-question { margin-bottom: 16px;}
.c-comment-input-question .btnAddComment { margin-top: 8px;}
.c-user-comment-list { padding: 12px 0; border-bottom: 1px solid #E3E6E8; display: flex; }
.c-user-comment-list .c-user-comment-detail { flex-grow: 1; margin-right: 8px; display: grid; grid-template-columns: minmax(28px, auto) 1fr; gap: 6px;}
.c-user-comment-list .c-user-comment-detail [data-fld="comment_name"] { font: var(--typo-bold-body-lg);}
.c-user-comment-list .c-user-comment-detail [data-fld="comment_text"] { color: #777777;}
.c-user-comment-list .c-user-comment-detail .commentRating .q-tooltip i { color: #E73C16;}
.c-user-comment-list .c-user-comment-detail .comment_img { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid #E3E6E8; margin-top: 4px;}
.c-user-comment-list .c-user-comment-detail .comment_img img { width: 100%; object-fit: cover;}
.c-btn-action-comment { display: flex; min-width: fit-content; gap: 8px;}

.c-comment-empty .c-emptystate { padding-top: 30px; padding-bottom: 30px;}
.c-comment-empty .c-emptystate-ico { width: 80px; height: 80px;}

/* Modal info c-group-table-question */
.c-desc-question-detail { margin-bottom: 20px;}
.c-group-table-question { display: grid; grid-template-columns: auto 300px; gap: 20px; width: 100%; overflow: auto; }
.c-group-table-question .dataTables_wrapper.c-datatable-pill-wrapper { margin-top: auto;}
.c-group-table-question .q-datatable.dataTable > thead > tr > th.no { width: 40px; min-width: 40px; max-width: 40px;}
.c-group-table-question .q-datatable.dataTable > thead > tr > th.description { width: 200px; min-width: 200px;}
.c-group-table-question .q-datatable.dataTable > thead > tr > th.task { width: 120px; min-width: 120px; max-width: 120px;}
.c-group-table-question .q-datatable.dataTable > thead > tr > th.expected-behavior { width: 240px; min-width: 240px; max-width: 240px;}
[data-fld="expected-behavior"] * { display: inline; margin: 0; white-space: pre-wrap; word-break: break-word;}

/* Highlight moving changed */
[page="p/p4294967374/PMSCalibrationForm"] .divSectionList .divContentItem.HI.changed .c-column-employee {
    background: #FFF3E0;
}
/* Show comment icon */
[page="p/p4294967374/PMSCalibrationForm"] .divSectionList .divContentItem.HI .btnComment {
    display: none;
}
[page="p/p4294967374/PMSCalibrationForm"] .divSectionList .divContentItem.HI.hascomment .btnComment {
    display: block;
    margin-top: 3px;
    height: 18px;
    color: var(--primary);
}
/* Show comment icon for SAL, BON */
[page="p/p4294967374/PMSCompensationCalibrationForm"] .divItemList .HI .btnComment, 
[page="p/p4294967374/PMSBonusCalibrationForm"] .divItemList .HI .btnComment {
    display: none;
}
[page="p/p4294967374/PMSCompensationCalibrationForm"] .divItemList .HI.hascomment .btnComment, 
[page="p/p4294967374/PMSBonusCalibrationForm"] .divItemList .HI.hascomment .btnComment {
    display: block;
    margin-top: 3px;
    height: 18px;
    color: var(--primary);
}
[page="p/p4294967374/PMSCalibrationForm"] .divSectionList .divContentItem.HI.hascomment .btnComment:hover {
    background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary);
}

/* Modal Comment: show "Add" or "Update" comment */
[page="p/p4294967374/PMSCalibrationForm"] #commentModal .divCommentInput .btnAddComment [data-mode], 
[page="p/p4294967374/PMSCompensationCalibrationForm"] #commentModal .divCommentInput .btnAddComment [data-mode], 
[page="p/p4294967374/PMSBonusCalibrationForm"] #commentModal .divCommentInput .btnAddComment [data-mode] {
    display: none;
}
[page="p/p4294967374/PMSCalibrationForm"] #commentModal .divCommentInput[mode="add"] .btnAddComment [data-mode="add"], 
[page="p/p4294967374/PMSCalibrationForm"] #commentModal .divCommentInput[mode="update"] .btnAddComment [data-mode="update"], 
[page="p/p4294967374/PMSCompensationCalibrationForm"] #commentModal .divCommentInput[mode="add"] .btnAddComment [data-mode="add"], 
[page="p/p4294967374/PMSCompensationCalibrationForm"] #commentModal .divCommentInput[mode="update"] .btnAddComment [data-mode="update"],
[page="p/p4294967374/PMSBonusCalibrationForm"] #commentModal .divCommentInput[mode="add"] .btnAddComment [data-mode="add"], 
[page="p/p4294967374/PMSBonusCalibrationForm"] #commentModal .divCommentInput[mode="update"] .btnAddComment [data-mode="update"] {
    display: block;
}

/* inculd document */
.c-include-document { display: grid; gap: 8px;}
.q-style .c-include-document li.PI.custom-control.custom-checkbox.readonly [type="checkbox"].custom-control-input ~ .custom-control-label::before { content: "\e956"; font-size: 12px; padding: 4px; background: none; }
.q-style .c-include-document li.PI.custom-control.custom-checkbox.readonly .custom-control-label { color: #A8A8A8; align-items: flex-start;}
.c-calibration-list-confirm { margin-top: 8px; margin-bottom: 24px; padding-left: 22px !important;}
.c-calibration-list-confirm li { padding-left: 0;}



#divPortal .dtfc-fixed-left:not(:has(~ .dtfc-fixed-left)) { box-shadow: inset -1px 0 0 var(--table-line);}
#divPortal .dtfc-fixed-left { z-index: 4; }

/* .c-style .q-datatable.c-table-group-evaluation.dataTable tbody tr td,
.c-style .q-datatable.c-table-group-evaluation.dataTable thead tr th { box-shadow: inset -1px 0 0 0 red;} */

@media(max-width:768px) {
    .c-performance-total-right { width: 100%;}
    .c-section-calibration-title { flex-direction: column; }
    .c-section-calibration-title .nav-tabs { max-width: 100%;}
    .c-calibration-title-menu-right {justify-content: flex-start;}
    .c-style .nav-tabs.c-calibration-title-menu-right .nav-link { padding: 14px; gap: 8px;}

    .c-calibration-column-group .c-column-employee button.btnOption { width: 44px; height: 44px;}
    .c-calibration-column-group .c-column-employee .media [data-fld="user_name"] { font: var(--typo-bold-body-lg);}
    .c-calibration-column-group .c-column-employee { padding: 8px;}

    .c-calibration-column-view-list { min-width: 340px; }
    .c-calibration-column-view .c-column-employee .media [data-fld="user_detail"], 
    .c-calibration-column-view .c-column-employee .media [data-fld="user_rating"], 
    .c-calibration-column-view .c-performance-level  { font: var(--typo-body-md);}

    .c-column-employee .media .fld_media { width: 36px; height: 36px; margin-right: 12px;}

    .modal.c-modal#commentModal .modal-dialog,  
    .modal.c-modal#overallCommentModal .modal-dialog { max-height: 100%;}
    
    [page="p/p4294967374/PMSCalibrationForm"] .divSectionList .divContentItem.HI.hascomment .btnComment { min-width: 44px; height: 32px; margin-top: 8px; }
    [page="p/p4294967374/PMSCalibrationForm"] .divSectionList .divContentItem.HI.hascomment .btnComment i { font-size: 16px; }

    .c-modal-form-comment {flex-direction: column;}
    .c-modal-form-comment .content-left { width: 100%; padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid #E3E6E8; margin-bottom: 16px;}
    .c-modal-form-comment .content-right { width: 100%; padding-left: 0;}
}