@media (max-width:768px) { /* pointer: coarse ทำเพื่อปรับดีไซน์เรื่อง iframe ของหน้า inbox ไม่ให้เเสดง MB ก่อนบีบจอ */
	:root {
		/* Row,Column */
		--coumn-gap: calc(12px / 2);
		--padding-mb: 16px;
		--padding-home-mb: 12px;

		--btn-md-padding: 12px 16px;
		--btn-md-height: 44px;

		--btn-md-font: var(--typo-bold-body-md);

		--btn-md-singleicon: 14px;



		--font-size: 16px;
		--typo-mont-page-title: bold 1.25rem/var(--line-height) var(--font-family-mont);
		--typo-mont-page-subtitle: bold 1.125em/var(--line-height) var(--font-family-mont);
		/* --typo-mont-lg: bold 1rem/var(--line-height) var(--font-family-mont); */
		--typo-mont-breadcumb: normal 0.75rem/var(--line-height) var(--font-family-mont);

		--typo-table-head: bold 0.875rem/var(--line-height) var(--font-family-body);
		--typo-table-body: normal 1rem/var(--line-height) var(--font-family-body);

		--typo-page-title: bold 1.25em/var(--line-height) var(--font-family-body);
		--typo-page-subtitle: bold 1.125rem/var(--line-height) var(--font-family-body);
		--typo-section-title: bold 1.125rem/var(--line-height) var(--font-family-body);
		/* --typo-section-subtitle: bold 1rem/var(--line-height) var(--font-family-body); */
		/* --typo-bold-body-xl: bold 1.15rem/var(--line-height) var(--font-family-body); */
		/* --typo-bold-body-lg: bold 1rem/var(--line-height) var(--font-family-body); */
		/* --typo-bold-body-md: bold 0.85rem/var(--line-height) var(--font-family-body); */
		/* --typo-bold-body-sm: bold 0.725rem/var(--line-height) var(--font-family-body); */
		/* --typo-body-xl: normal 1.15rem/var(--line-height) var(--font-family-body); */
		/* --typo-body-lg: normal 1rem/var(--line-height) var(--font-family-body); */
		/* --typo-body-md: normal 0.85rem/var(--line-height) var(--font-family-body); */
		/* --typo-body-sm: normal 0.725rem/var(--line-height) var(--font-family-body); */

		
		--form-footer-height: 60px;
		--btn-lg-height: 44px;

		--form-control-height: 48px;
		--c-page-header-height: 52px;
	}

	/* user menu */
	#divPortal .q-user .dropdown-menu{ max-width: unset;}
	#divPortal .q-user .q-switch-box{max-height: unset;}
	#divPortal .q-user .dropdown-menu.show { margin-top: 0; border-radius:0; right: 0; left: 0; width: 100vw; padding-bottom: env(safe-area-inset-bottom);}
	#divPortal .q-header .q-account .c-mb-dropdown-close { display: flex; margin: 6px 12px 8px auto;}
	#divPortal .q-user-account {margin-top: 0;}
	#divPortal .q-user-account .q-name {  font: var(--typo-body-lg); }
	#divPortal .q-user-account .q-position { font: var(--typo-body-md); }
	#divPortal .q-user .dropdown-menu.show .q-switch span{ font-size: 14px; line-height: 21px;}
	#divPortal .q-user ul li a { min-height: 52px; justify-content: flex-start;}
	#divPortal .q-user ul li i { font-size: 14px; }
	#divPortal .q-user .q-switch i { font-size: 12px; }
	#divPortal .q-user ul { padding: 8px 0; overflow: hidden;}
	#divPortal .q-user .q-switch ul { padding-top: 0px; }  
	/* user menu */

	/* device trust */
	.modalDialogConfirm[data-theme="device-trust"].c-style .dialogConfirm .modal-dialog.modal-dialog-centered .modal-content { min-height: 100%; max-height: unset; border-radius: unset; padding: 20px 0px 40px; }

	.q-header .q-account .c-mb-dropdown-close { display: flex; }

	body { overflow: hidden; }

	/* .c-card-header-title { font: ; }  */

	.q-ipad-hide { display: none;}
	.q-mb-hide { display: none;}
	
	.c-page-sidebar { width: 100%; background-color: transparent; }
	.c-content-menu-top-0 { top: 0; margin-top: 0;}
	.c-page-header { min-height: var(--c-page-header-height); height: var(--c-page-header-height); padding: 4px 12px 4px 2px }
	.c-page-header:not([data-breadcrumb="0"]) { padding-bottom: 4px; }
	/* .c-page-header[data-breadcrumb="0"] { padding-left: var(--padding-mb); } */
	/* .c-page-header-category { font: bold 12px/18px var(--font-family-body);} */
	.c-page-header-title { padding: 0; min-height: auto;}
	.c-page-header .btn { margin-top: 0; width: 40px; min-width: 40px; height: 40px; margin-right: 4px; margin-left: 0; }
	.c-page-header .btn[style*=none] + .c-page-header-content { padding-left: 12px; }
	[page="p/wise/QbicInbox"] .c-page-header .btn[style*=none] + .c-page-header-content { padding-left: 0; } 
	.c-page-header .btn:not([style*=none]) + .btn[style*=none] + .c-page-header-content { padding-left: 0; }

	.q-content-iframe iframe { background: #FFFFFF; }

	.c-style .c-page-header-category  .breadcrumb .breadcrumb-item { white-space: nowrap; overflow: hidden; }
	.c-style .c-page-header-category .breadcrumb-item a { overflow: hidden; text-overflow: ellipsis; display: block; }
	.c-style .c-page-header-category .breadcrumb { flex-wrap: nowrap; }
	.c-style .c-page-header-content { width: 100%; overflow: hidden; }

	.c-page-body-header { flex-direction: column; gap: 16px; margin-top: 16px; min-height: auto;}
	.c-page-body-header-left { width: 100%; max-width: 100%; flex: 100%}
	.c-page-body-header-left .c-performance-dropdown,
	.c-page-body-header-left .c-performance-dropdown .dropdown-toggle { width: 100%;}
	.c-page-body-header-right .btn { height: var(--btn-lg-height);}
	.c-page-body-header + .c-page-body-list { margin-top: 16px;}
	.c-page-body-header .form-control { height: 48px; }
	
	.c-style .container { padding-left: var(--padding-mb); padding-right: var(--padding-mb);}/*ใช้งานที่ MB*/
	.c-page-header .container { padding-right: 0; padding-left: 0; }
	.c-style .row.form-group .no-gutters { margin-right: 0; margin-left: 0; }
	.c-style .row.form-group.c-is-required .col-form-label:has([data-toggle="tooltip"]) { justify-content: flex-start;}

	/* .c-card .card-body { padding: 12px !important;} */
	
	.c-content-group { flex-direction: column; gap: 0; padding-bottom: 16px;}
	.c-page-group {  min-height: 100%; }
	.c-page-group-single .c-content-body { padding-top: 16px; width: 100%;} /* ปิด padding top จาก 0 เป็น 16px เพราะชิดของบนของ breadcrumb */
	.lookup-open .c-content-form { padding-bottom: 200px;} /* support lookup bottom  */

	.c-content-heading { margin-bottom: 16px; font: var(--typo-section-title); }
	.c-content-heading.heading-has-sub { margin-bottom: 8px; flex-direction: column; gap: 4px; }
	.c-content-heading-text { margin: 0; }
	.c-content-heading-text .c-content-heading-subtext .weight,
	.c-content-heading-text .c-content-heading-subtext .rating { font-weight: bold; }
	
	.c-content-card-heading-text { margin-bottom: 16px; }

	.c-content-menu { max-width: 100%; width: 100%; padding: 0 0 9px; background: var(--background-body); margin-bottom: 24px; transform: translate(0,0); z-index: 1; border-radius: 0; }
	.c-content-menu + .c-content-body { max-width: 100%; width: 100%; padding-left: 0; border: 0; padding-top: 16px; }
	.c-content-menu .nav { flex-direction: row; flex-wrap: nowrap; padding-left: var(--padding-mb); padding-right: var(--padding-mb); margin-left: calc(-1 * var(--padding-mb)); min-width: calc(100% + (2 * var(--padding-mb))); padding-bottom: 9px; overflow: auto; gap: 8px; }
	.c-content-menu .nav::before { left: var(--padding-mb); height: 3px; width: calc(100% - (2 * var(--padding-mb))); bottom: 0; top: inherit; }
	/* .c-content-menu .nav::before { width: 100%; height: 3px; bottom: 9px; left: 0; top: unset; position: fixed; } */
	.c-content-menu .nav .nav-link::before { width: 100%; height: 3px; bottom: -9px; left: 0; top: auto; z-index: 2;}
	.c-content-menu .nav .nav-link::after { content: ''; width: calc(100% + 8px); height: 3px; bottom: -9px; left: 0; top: auto; background: #DCDFE4; display: block; position: absolute; z-index: 1; }
	/* .c-content-menu .nav .nav-link::after + .nav-link::after { width: calc(100% + 8px); } */
	.c-content-menu .nav .nav-link { flex: none; margin-top: 0; padding: 6px 12px; }
	.c-content-menu .nav .nav-link + .nav-link { margin-top: 0; margin-left: 0; }
	.c-content-menu .nav .nav-link:last-child:not(.hide)::after { width: 100%; }

	.c-content-form { margin-top: 0;}
	.c-content-form .row.form-group { flex-direction: column;}
	.c-content-form .row.form-group .col-form-label { margin-bottom: 8px;}
	.c-content-form .row.form-group > [class*="col-"],
	.c-content-form .row.form-group > [class*="col-"] [class*="col-"] { text-align: left; max-width: 100%;}

	.c-form-footer .container { padding: 8px var(--padding-mb); gap: 16px; }
	.c-form-footer .btn { width: 100%; height: 44px; }

	/* .c-page-sidebar { display: none; } */


	.c-sidebar-wrapper { max-width: 100%;  } /*padding-top: 0;*/
	.c-sidebar-wrapper .nav-tabs { margin: 0; width: auto; }
	.c-page-group::before,
	.c-page-group::after { display: none; }
	.c-page-sidebar + .c-page-content { border: 0; max-width: 100%; background: transparent; align-self: stretch; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.c-todo-heading { padding-top: 0; padding-bottom: 0; position: relative; margin: 0; margin-bottom: 0; }
	.c-todo-heading::before { display: none !important; }
	.c-userflow-group { padding-top: 0; padding-left: var(--padding-mb); padding-right: var(--padding-mb); padding-bottom: 16px; gap: 4px; margin-left: calc(-1 * var(--padding-mb)); width: calc(100% + (var(--padding-mb) * 2)); }
	.c-userflow-item { min-width: calc(33.33vw - 12px); max-width: calc(33.33vw - 12px); }
	.c-userflow-item + .c-userflow-item .c-userflow-progress::before { width: calc(100% + 4px); }
	.c-userflow-box { flex-direction: column; overflow: hidden; text-align: center; gap: 6px; }
	.c-userflow-content { width: 100%; }
	.btn.c-btn-toggleuserflow { font: var(--typo-body-sm); padding: 6px 12px; margin-left: 40px; }

	.c-todo-heading .container { padding: 12px !important; gap: 0 12px; flex-wrap: wrap; }
	.c-todo-heading > .container { padding-top: 16px !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 8px !important; margin-bottom: 0 !important; }
	.c-todo-heading-content { max-width: calc(100% - 52px); }
	.c-todo-heading-avatar { width: 40px; height: 40px; min-width: 40px; }
	.c-userflow .container {  padding: 0 !important; }
	.c-page-sidebar + .c-page-content .c-content-group { padding-left: 0; }
	.c-page-sidebar + .c-page-content .c-content-menu { position: relative; top: 0; background: none; margin-bottom: 15px; }
	/* .c-todo-heading-title { font: var(--typo-bold-body-xl); } */
	.c-todo-heading-line::before { display: none; }
	.c-todo-heading-line { position: relative; top: 0; }
	.c-content-card-group { display: flex; flex-wrap: wrap; margin-top: 16px; gap: 12px; }
	.c-content-card { width: 100%; }
	.c-content-card-rating { margin: 8px 0; min-height: auto; }
	.c-content-menu-title { font: var(--typo-bold-body-xl); }
	.c-content-menu-text { font: var(--typo-body-lg); }
	.c-content-body hr { /*margin: 0 -12px; margin-bottom: 16px; กระทบตัวกลางหน้าที่ใช้งานจาก PC*/ margin: 16px calc(-1 * var(--padding-mb)); }
	.c-card .card-header:not(.c-accordion-card-header) + .card-body { border-top: 1px solid var(--color-line); }
	.c-form-footer  { margin: 0 calc(-1 * var(--padding-mb)); margin-top: auto; }
	.c-content-card-heading-label { font: var(--typo-bold-body-lg); }
	.c-todo-heading .btn[data-target="#collapseSidebar"] { display: none; }

	/* .c-toast .toast { min-width: 400px !important; max-width: 400px !important; } */
	/* .c-toast .toast .btnDone { width: 36px !important; height: 36px !important; font-size: 12px !important; } */

	#todo-attendance .card-body,
	#todo-indicators .card-body { padding: 0 !important; }
	#todo-attendance .c-content-attendance-card .card-body,
	#todo-indicators .c-content-attendance-card .card-body { padding: 12px !important; }
	.c-card.c-content-attendance-card { width: 100%; }
	.c-content-attendance-card .card-footer { padding: 12px; }

	.c-card + .c-card { margin-top: 12px; }
	.c-content-heading ~ .c-card + .c-card { margin-top: 48px; padding-top: 16px; }
	.c-accordion-card-header .btn { min-height: 24px; height: 24px; }
	.c-accordion-card-header .btn i { min-height: 24px; height: 24px; width: 24px; min-width: 24px; }

	.c-content-body { width: 100%; }

	.c-page-body[data-sidebar="0"] .c-page-content .container { padding-left: var(--padding-mb); }

	.c-style .c-datatable-responsivecard .c-datatable-label { display: block; }

	.c-style .c-datatable-responsivecard .dataTables_scrollHead { display: none; }
	.c-style .c-datatable-responsivecard .q-datatable.dataTable { border: 0 !important; display: block; }
	.c-style .c-datatable-responsivecard tbody { display: block; }
	.c-style .c-datatable-responsivecard tbody tr + tr { margin-top: 24px; }
	.c-style .c-datatable-responsivecard tbody tr { display: flex; border: 1px solid var(--color-line); border-radius: 8px; flex-wrap: wrap; padding: 12px; overflow: hidden; }
	.c-style .c-datatable-responsivecard tbody tr td { border: 0 !important; padding: 0 !important; }
	.c-style .c-datatable-responsivecard tbody tr td + td { margin-top: 12px; }
	.c-style .c-datatable-responsivecard .c-datatable-mw-100 { width: 100%; }
	.c-style .c-datatable-responsivecard .c-datatable-mw-50 { width: 50%; }
	.c-style .c-datatable-responsivecard .c-datatable-mw-100.c-datatable-action { margin: 16px 0 0 0; padding: 12px !important; position: relative; max-width: 100%; min-width: auto; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--table-line);}
	/* .c-style .c-datatable-responsivecard .c-datatable-mw-100.c-datatable-action::before { content: ''; background: var(--primary); width: 100%; height: 1px; display: block; position: absolute; top: 0; left: 0; opacity: 0.3; } */
	.c-style .c-datatable-responsivecard .c-datatable-title { font: var(--typo-bold-body-lg); }
	.c-style .c-datatable-responsivecard .c-datatable-mw-100.c-datatable-action .c-datatable-label { margin-bottom: 8px; font-weight: bold; }
	.c-style .q-datatable .row.form-group.form-group-vertical .col-form-label { margin-bottom: 8px; }

	/* Evaluate people */
	.c-style .divItemEvalList .dataTables_wrapper:not(.c-datatable-pill-wrapper) .dataTables_scroll,
	.c-style .c-datatable-responsivecard.divItemEvalList tbody tr { border: 0;}
	.c-style .divEvaluate.c-datatable-action .form-group.row { margin: 0;}
	.c-style .divEvaluate.c-datatable-action .form-group.row > [class*="col"] { padding-left: 0; padding-right: 0;}
	.c-style .c-datatable-responsivecard.divItemEvalList tbody tr { padding: 0;}
	.c-style .c-datatable-responsivecard .q-datatable.dataTable > tbody td.c-datatable-title { font: var(--typo-bold-body-lg);}

	/* reset qbic style */
	.q-switch { background-color: transparent; }
	.q-user ul li a, .q-menu-left-mb .q-switch li a:hover, .q-switch li.active a{ color: #2E2E2E; }   
	.q-switch span{color: #848586;}
	.q-style[layer="2"] { top: var(--height-header); }

	/* reset home */
	.b-board .b-board-row-item, .divBoard .divDrawBox .boxItem { margin-bottom: 20px; }

	.q-page.c-style[layer="2"],
	.q-page[pg="IFrame"][layer="2"] { height: calc(100%) - var(--height-header); }

	.c-page-group.c-page-group-single .c-content-menu-top-0 { top: 20px; box-shadow: 0 -12px 0px 12px var(--background-body);}
	.c-page-body[data-sidebar="0"] .c-form-footer { background: #ffffff; border-top: 1px solid #E3E6E8; }
	.c-page-body[data-sidebar="0"] .c-form-footer::after, 
	.c-page-body[data-sidebar="0"] .c-form-footer::before { display: none;}


	/* My Individual Goal */
	.c-performance-total { margin: 24px 0; gap: 24px; }
	.c-performance-total, 
	.c-performance-total-heading.HXL{ flex-wrap: wrap; align-items: baseline; }
	.c-performance-total-heading { margin-bottom: 16px; }
	.c-performance-total-cardgroup { grid-template-columns: repeat(2, 1fr); }
	.dropdown.c-performance-dropdown, 
	.c-performance-dropdown .btn{ width: 100%; }
	.c-performance-dropdown .btn { height: 70px; }
	.c-performance-total-heading-split { top: 3px; position: relative; }
	.c-performance-total-heading-weight { font: var(--typo-body-lg); }
	.c-datalayout-card .q-datatable.dataTable { --card-view: 1;}
	.c-accordion-card-header .btn .c-accordion-card-header-weight { font: var(--typo-body-sm) !important; }
	.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-period,
	.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-statusandprogress { margin-top: 8px; }
	.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-lastupdate { margin-top: 12px; }

	.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-lastupdate::before { margin: 5px 2px; }

	.c-performance-dropdown-title { font-size: 1.25rem; }

	.c-performance-card + .c-performance-card { padding-top: 16px; }

	.c-performance-total-right .c-separate { display: none; }

	.c-content-menu .nav
	/* .c-style[page="p/wise/QbicInbox"] .container { padding-left: 0; padding-right: 0; } */
	/* .c-style[page="p/wise/QbicInbox"] .c-sidebar-body, */
	/* .c-sidebar-filter, */
	/* .c-sidebar-wrapper > nav, */
	.c-content-menu-title,
	.c-content-menu-text { padding-left: var(--padding-mb); padding-right: var(--padding-mb); }

	.c-sidebar-wrapper > nav { padding-top: 12px; padding-bottom: 16px; position: sticky; top: 0; background-color: #FFFFFF; z-index: 3; }

	.c-collapse-fullpage.btn { display: none !important; }

	nav + .c-sidebar-filter { margin-top: 0; margin-bottom: 20px; margin-right: 0; padding-top: 0; padding-bottom: 16px; top: 61px; z-index: 4; }
	.c-sidebar-filter { /*position: sticky; top: 0; margin: 0; padding: 0; padding-top: 12px;*/ padding-bottom: 16px; background: #FFFFFF; z-index: 3; justify-content: space-between; }
	.c-sidebar-filter + #searchSection { position: sticky; top: 68px; background: #FFFFFF; z-index: 3; }
	.c-sidebar-filter.divSelectAll { padding-top: 0; top: 117px; }
	.c-page-sidebar-height-auto .c-sidebar-wrapper { height: 100%; padding-top: 0; }
	.c-page-sidebar-height-auto .c-sidebar-body { overflow: auto; }
	.c-page-sidebar-height-auto > .collapse { height: 100%;}
	.c-searchfilter-body { margin-right: 0; margin-bottom: 16px; }
	.c-viewas-label { margin-top: 16px; margin-bottom: 4px; }
	.c-viewas-label-heading { margin-top: 0; }
	.c-sidebar-filter .select2-container--default .select2-selection--single,
	.c-sidebar-filter .c-input-group-search { --form-control-height: 40px; }
	.c-sidebar-body .c-sidebar-filter .btn { --btn-sm-height: 40px; }
	.c-sidebar-body .c-sidebar-filter .btn i { --btn-sm-singleicon: 14px; }
	.c-view-as .c-input-group-lookup .input-group .form-control { --form-control-height: 40px; height: var(--form-control-height); min-height: var(--form-control-height); max-height: var(--form-control-height); }
	.c-sidebar-body .c-sidebar-filter { padding-bottom: 0; margin-bottom: 8px; gap: 12px; }
	.c-lookup-nodata { padding: var(--lookup-option-padding); font: var(--dropdown-option-font); color: #888888;}

	.c-style .c-page-sidebar .list-group-item .btn { --btn-sm-height: 32px; }
	/* .c-content-menu .nav */

	.c-style[page="p/wise/QbicInbox"] .c-sidebar-body { overflow: auto; }
    .c-style[page="p/wise/QbicInbox"] .c-page-sidebar .list-group { /*border-top: 1px solid var(--color-line);*/ border-radius: 0; }
	.c-page-sidebar .list-group-item { padding-top: 10px; padding-bottom: 10px; padding-right: 12px; }

	.c-style .b-board.container > .divItemList { flex-direction: column; }

	.c-style .c-myannounce-listitem-item { box-shadow: none !important; }

	.q-table-row.q-table-header .q-table-col.q-table-groupaction { min-width: 64px; }

	.c-userflow { z-index: 1; }
	.c-page-group.c-page-group-single .c-todo-heading ~ .c-content-group .c-content-menu-top-0 { top: 0 !important; padding-top: 8px; padding-bottom: 0; flex-direction: row; flex-wrap: wrap; display: flex; margin-bottom: 16px; align-items: baseline; }
	.c-page-group.c-page-group-single .c-todo-heading ~ .c-content-group .c-content-menu-title { max-width: calc(100% - 100px); font: var(--typo-bold-body-md); padding: 6px 0; }
	.c-page-group.c-page-group-single .c-todo-heading ~ .c-content-group .c-content-menu-text { margin-left: auto; padding: 0; }
	.c-page-group.c-page-group-single .c-todo-heading ~ .c-content-group .c-content-menu-text .btn { height: 32px; text-decoration: none !important; }
	.c-todo-heading ~ .c-todo-heading-line { margin: 0 calc(-1 * var(--padding-mb)); }


	.c-page-dashboard > .container, 
	.c-page-single > .container { padding-top: 16px; padding-bottom: 16px; }
	.c-performance-dropdown { max-width: 100%; }
	.c-performance-total-card { max-width: 100%; }

	.c-style input[type="color"].form-control, 
	.c-style input[type="date"].form-control, 
	.c-style input[type="datetime"].form-control, 
	.c-style input[type="datetime-local"].form-control, 
	.c-style input[type="email"].form-control, 
	.c-style input[type="month"].form-control, 
	.c-style input[type="number"].form-control, 
	.c-style input[type="password"].form-control, 
	.c-style input[type="search"].form-control, 
	.c-style input[type="tel"].form-control, 
	.c-style input[type="text"].form-control, 
	.c-style input[type="time"].form-control, 
	.c-style input[type="url"].form-control, 
	.c-style input[type="week"].form-control, 
	.c-style select:focus, 
	.c-style textarea.form-control { font: var(--typo-body-lg); }

	.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-goal { font: var(--typo-bold-body-lg) !important; }

	.c-style .btn.btnConversation,
	.c-style .btn.btnMilestone { --btn-xl-height: 48px; }

	.c-form-highlight { padding: 16px 12px; }

	.row.form-group .c-datepicker-range .q-input-group-datepicker { max-width: 100%; flex: 0 0 100%; flex-grow: 1; flex-basis: 0; }

	.modalDialogConfirm.c-style .modal-header,
	.modal.c-modal .modal-header { padding: 20px var(--padding-mb); font: var(--typo-bold-body-xl); color: var(--primary); /*filter: brightness(0.7)*/ }
	.modalDialogConfirm.c-style .modal-body { overflow: unset; }
	.modalDialogConfirm.c-style .modal-body,
	.modal.c-modal .modal-body { padding: 20px var(--padding-mb); padding-top: 0; }
	.modal.c-modal .modal-title { padding-top: 5px; font: var(--typo-page-subtitle); }
	.modal.c-modal .modal-header .close { --btn-md-height: 40px; top: 0; right: 0; margin: 0; margin-left: auto; }
	.modalDialogConfirm.c-style .modal-footer,
	.modal.c-modal .modal-footer { padding: 8px var(--padding-mb) !important; }

	.modal.c-modal:not(.c-modal-right) .modal-dialog.modal-dialog-centered,
	.modalDialogConfirm.c-style .dialogConfirm .modal-dialog.modal-dialog-centered { justify-content: flex-end; padding: 0; margin: 0; height: 100%; max-height: 100%; display: flex; flex-direction: column; }
	.modal.c-modal:not(.c-modal-right) .modal-dialog.modal-dialog-centered .modal-content { min-height: 100%; max-height: 100%; border-radius: 0; }
	.modalDialogConfirm.c-style .dialogConfirm .modal-dialog.modal-dialog-centered .modal-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; min-height: 35%; max-height: 85%; }
	.modal.c-modal:not(.c-modal-right).fade:not(.show) .modal-dialog  { -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: none; }
	.modalDialogConfirm.c-style .dialogConfirm:not(.show) .modal-dialog { -webkit-transform: translate(0, 50px); transform: translate(0, 50px); }
	.modal.c-modal:not(.c-modal-right) .modal-dialog.modal-dialog-centered .modal-header { padding-left: var(--padding-mb) !important; padding-right: var(--padding-mb) !important;/* padding-bottom: 0 !important;*/ padding-top: 16px; }
	/* .modal.c-modal:not(.c-modal-right) .modal-dialog.modal-dialog-centered .modal-body { padding-top: 16px !important; } */

	.modalDialogConfirm.c-style .ACT_NEW { width: 100%; gap: 8px; flex-direction: column; }
	.modalDialogConfirm.c-style .dialogConfirm .modal-footer .ACT_NEW .btn { width: 100%; }
	.modalDialogConfirm.c-style .form-group.modalItem { font: var(--typo-body-lg); }

	.modal.c-modal .modal-footer .btn { width: 100%; }

	.c-style .modal.c-modal .dataTables_wrapper .dataTables_scroll .dataTables_scrollHead { min-width: fit-content; }
    .c-style .modal.c-modal .dataTables_wrapper .dataTables_scroll { min-width: fit-content; }
    .modal.c-modal .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody .bootstrap-datetimepicker-widget { inset: var(--form-control-height) auto auto auto !important; }

	/* .c-file-upload-list-name { font: var(--typo-body-md); } */

	.c-posts-items { margin-top: 16px; padding-top: 16px; }
	.c-posts-items:not([style*=none]) + .c-posts-items { padding-top: 16px; }
	.c-conversation-post { margin-top: 0; }
	.c-posts-action .btn { --btn-md-height: 40px; }

	.c-style .col-form-label { font: var(--typo-bold-body-lg); }

	.c-users { gap: 12px; }
	.c-users-avatar { width: 40px; min-width: 40px; height: 40px; }

	.c-page-body-content { margin-top: 14px; margin-bottom: 14px; }
	.c-reward-currentbalance { margin-bottom: 16px; } 
	.c-redeempoint-list { margin-top: 16px; }
	.c-reward-currentbalance { padding: 20px; gap: 6px; }
	.c-reward-currentbalance-text { font-size: 1.25rem; }

	.c-redeempoint-title { margin-bottom: 16px; }
	.c-redeempoint-listitem + .c-redeempoint-listitem { margin-top: 24px; }
	.c-redeempoint-listitem-item { align-items: flex-start; gap: 12px; }
	.c-redeempoint-action .btn { height: 36px; min-width: 100px; font-size: 14px; }
	.c-redeempoint-action [disabled].btn { height: auto; white-space: normal; word-break: break-word; min-width: 128px; } /*Need xx more to redeem*/
	.c-redeempoint-text { width: 100%; }

	.b-board .b-board-row .b-board-column.c-board-action-report { padding: 16px; background: #ffffff; border-radius: 12px; }
	.c-style .tox .tox-toolbar--scrolling .tox-toolbar__group { width: auto; }

	.q-layout-page > form.divFormList { position: sticky; left: 0; }

	.c-datalayout-action { height: 44px; }
	.c-datalayout-action .btn { --btn-md-height: 36px; }

	/* .c-style[page="p/wise/QbicInbox"] .container { padding-left: var(--padding-mb); padding-right: var(--padding-mb); } */
	.c-style[page="p/wise/QbicInbox"] .container { padding-left: 0; padding-right: 0; }
	[page*="QbicInbox"][data-st="list"] .c-page-content { display: none; }
	[page*="QbicInbox"] .c-page-sidebar { overflow-y: auto; padding-left: var(--padding-mb); padding-right: var(--padding-mb); }
	.b-board-row [page*="QbicInbox"] .c-page-sidebar.c-page-sidebar-height-auto { padding-left: 0; padding-right: 0; }

	/* select showmore line-height KPI inbox */
	.c-style .row.form-group.show-more .col-form-label + div,
	.c-style .row.form-group.c-label-text .col-form-label + div { line-height: var(--line-height); }


	/* TODO move to Bigure */
	.b-board .b-box-row-item + .b-box-row-item { flex-direction: column; }
	.divBoard.c-board-report .b-board-column { padding: 16px; }
	.c-report-npssurvey .b-widget-item.c-report-column-right { max-width: 100%; }
	.divBoard.c-board-report .b-board-row-item.c-report-column-left { margin: 0; }
	.divBoard.c-board-report .c-report-summary { padding: 0; }

	.c-ga-data .content { flex-direction: column; width: 100%; display: flex; }
	.c-ga-legend-group.c-ga-legend-vertical { margin: 0; margin-top: 24px; max-width: 100%; flex-direction: row; }
	.c-ga-data[data-ga-type="doughnut"] .content {  flex-grow: 0 !important; max-width: 100%; }
	/* .c-ga-data[data-ga-type="doughnut"] canvas { min-width: 100%; min-height: 100%; } */
	.c-ga-data[data-ga-type="doughnut"][data-mb="1"] { min-height: auto; max-height: unset; }

	.divBoard.c-board-report .b-board-row-item + .b-board-row-item { margin-top: 24px; }
	.divBoard.c-board-report .b-board-column.tc-report-tablelist .b-table-report { margin-top: 16px; }
	.divBoard.c-board-report .b-board-column.tc-report-tablelist .q-breadcrumb.breadcrumb { padding: 0; }


	/* CSS - Onboarding */
	.c-onboard { 
		--c-onboard-gap: 16px;
	}
	.c-onboard { grid-template-columns: 1fr; margin-bottom: 0;}
	.c-user-onboard-photo { width: 40px; height: 40px;}
	.c-title-column-onboard { padding: 16px 16px 8px;}
	.c-content-column-onboard { padding: 12px 16px 16px;}
	.c-people-to-meet, 
	.c-people-contact { grid-template-columns: 1fr; gap: 12px;}
	.c-people-to-meet .c-user-onboard, 
	.c-people-contact .c-user-onboard { padding: 4px 0;}

	.c-popover-btn .c-border-blue { font-size: 24px; width: 48px; height: 48px;}
 
	.c-title-column-onboard .btn > span { display: none;}
	.c-course-learn { grid-template-columns: repeat(2, 1fr); }

	#accordionDrafts .c-accordion-card-header .btn-submitAllDrafts { margin-right: 12px; }
	.c-accordion-card-header-weight { font: var(--typo-body-sm); }


	.c-toast { top: 40px;}
	/* .c-toast .toast { min-width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } */
	#p24 .c-toast .toast { min-width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
	/* #p24 .c-toast .notiMesg.d-system-alert::before, 
	#p24 .c-toast .notiMesg.d-system-alert::after,
	#p24 .c-toast .notiMesg.d-system-alert .btnDone::after { font: var(--typo-body-lg);} */
	

	/* ------ Global Search ------ */
	.c-modal-global-search .divSearch { margin: 0;}
	.c-global-search-form { display: flex; flex-wrap: nowrap;}
	.c-global-search-form .txtSearch.form-control { transition: none;}
	.c-global-search-form form { flex-grow: 1;}
	.c-global-search-form .input-group-append { position: absolute; right: 0; top: 0; z-index: 4; height: 100%;}

	.c-globalsearch-mb.btn { border-radius: 6px; padding: 5px; min-width:32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-color: transparent; background-color: transparent; margin-right: 0; }
	.c-globalsearch-mb.btn,
	.c-globalsearch-mb.btn:active,
	.modal.c-modal.c-modal-global-search .modal-header .close:hover { border-color: transparent !important; background: #ffffff !important; }
	.c-globalsearch-mb.btn i { color: #888888; font-size: 18px;}

	.c-input-search-autocomplete-group { padding: 0 8px 12px; display: grid; grid-template-columns: 1fr; gap: 2px;}
	.c-input-search-autocomplete-group-title { margin-bottom:8px; margin-top: 16px; color: #888888; font: var(--typo-bold-body-lg);}
	.c-input-search-autocomplete-group:not([style*="none"]) + .c-input-search-autocomplete-group { border-top: 1px solid #E3E6E8;}
	.c-list-autocomplete-group { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; font: var(--typo-body-xl);}
	.c-search-thumbnail-content { display: flex; align-items: center; justify-content: center;}
	.c-search-thumbnail-content.c-icon-app i::before { width:24px; height:24px;}
	.c-search-thumbnail-employee,
	.c-search-thumbnail-employee i::before { width: 32px; height: 32px; overflow: hidden;}
	.c-search-thumbnail-employee img { width: 100%; height: 100%;}

	.c-input-search-autocomplete-title { font: var(--typo-body-lg);}
	.c-input-search-autocomplete-subtitle { font: var(--typo-body-md); color: #545555;}

	/* Settings */
	#p24 [page*="QbicMyAccount"] .c-coding-agreement .divNavTab.q-column { margin-top: 0; padding-top: 12px; overflow-y: auto; }
	#p24 [page*="QbicMyAccount"] .q-column-left { padding: 0; }
	#p24 [page*="QbicMyAccount"] .q-column-left .c-dropdown-toggle { height: 48px; }
	#p24 [page*="QbicMyAccount"] .q-column-right .d-box-setting-save { margin-top: 24px; }
	#p24 [page*="QbicMyAccount"] .q-column-right .d-box-setting-save .btn { min-width: 100px; }
	#p24 [page*="QbicMyAccount"] .q-title-form { padding: 0; margin-top: 16px; margin-bottom: 24px; color: var(--primary); border-bottom: 0; }
	#p24 [page*="QbicMyAccount"] .d-bar-submenu { display: flex; align-items: center; --bar-submenu-ico: 24px; flex-wrap: wrap; margin-bottom: 24px; }
	#p24 [page*="QbicMyAccount"] .list-group { margin-left: 8px; margin-right: 8px; }
	#p24 [page*="QbicMyAccount"] .list-group + .list-group { margin-top: 24px; padding-top: 24px; border-top: 1px solid #E3E6E8; }
	#p24 [page*="QbicMyAccount"] .list-group-item { padding: 0; align-items: center; }
	#p24 [page*="QbicMyAccount"] .list-group-item .d-box-imgand-status img { margin-right: 12px; }
	#p24 [page*="QbicMyAccount"] .list-group-item .d-widht-full { flex-grow: 1; font-weight: 700; font-size: 16px; }
	#p24 [page*="QbicMyAccount"] .d-bar-submenu .btnBack { min-width: 40px; min-height: 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
	#p24 [page*="QbicMyAccount"] .d-bar-submenu .d-bar-submenu-txt { font-size: 16px; font-weight: 700; }
	#p24 [page*="QbicMyAccount"] .d-bar-submenu-detail { padding: 0; border: 0 !important; padding-left: 40px; font-size: 16px; margin-top: 4px; }
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-form-content { padding: 0; }
	#p24 [page*="QbicMyAccount"] .q-menutab-left .dropdown-menu { max-width: 100%; padding: 20px 12px; max-height: calc((var(--qbicvh) * 100) - 200px) !important; }

	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left ul:before { content: ""; border-left: solid 3px #DCDFE4; border-radius: 2px; position: absolute; left: 0; top: 32px; bottom: 0;}
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left ul { position: relative;}
    #p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left ul + ul { margin-top: 24px; }
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left li { background: transparent; border: 0; position: relative;}
    #p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left li + li { margin-top: 8px; }
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left li:hover a, .q-menutab-left li.active a { background: var(--menu-hover); border-radius: 6px; position: relative;}
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left li:hover a span, .q-menutab-left li.active a span{color: var(--primary); filter: brightness(0.7); font-weight: bold;}
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left a { padding: 8px; margin-left: 10px; margin-bottom: 0; color: #131313; font-display: 16px; }
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left h4 { margin: 0 0 10px 0; font-size: 16px; padding-top: 0; }
	#p24 [page*="QbicMyAccount"] .q-form-heightpage .q-menutab-left li:hover:before, .q-menutab-left li.active:before { content: ""; z-index: 1; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-qcolor3); border-radius: 2px; overflow: hidden; }
	#p24 [page*="QbicMyAccount"] .q-form-content .HN { text-align: center; width: 100%; display: flex; align-items: center; flex-direction: column; min-height: 305px; justify-content: center; }
	/* #p24 [page*="QbicMyAccount"] .d-setting-txt-detail { font-size: 16px; }
    #p24 [page*="QbicMyAccount"] .q-list-group-setting { border: 0; padding: 0; }
    #p24 [page*="QbicMyAccount"] .q-item-list-toggle { border: 0; padding: 0; min-height: 36px; padding-left: 20px; padding-right: 8px; }
    #p24 [page*="QbicMyAccount"] .q-item-list-toggle .q-switch-toggle { width: 52px; height: 32px; }
    #p24 [page*="QbicMyAccount"] .q-item-list-toggle .q-switch-toggle .q-switch-slider:before { width: 26px; height: 26px; bottom: 3px; }
    #p24 [page*="QbicMyAccount"] .q-item-list-toggle .q-switch-toggle .q-switch-slider:before { -webkit-transform: translateX(2px); -ms-transform: translateX(2px); transform: translateX(2px); }
    #p24 [page*="QbicMyAccount"] .q-item-list-toggle .q-switch-toggle input:checked + .q-switch-slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } */


	/* style report full page  */
	
	.c-report-dashboard { flex-direction: column; gap: 0; height: auto;}
	.c-report-dashboard .c-report-detail .c-report-export .c-btn-right .c-btn-filter { display: flex;}
	.c-report-dashboard .c-report-filter .c-btn-filter { display: none;}
	.c-report-dashboard .c-report-filter[data-toggle="1"] { order: -1; max-width: 100%; padding-left: 0; border-left: 0; border-bottom: 1px solid var(--color-line); }

	[bigure-link*="p4294967387/namecard"] .c-header { display: none;}
	[bigure-link*="p4294967387/namecard"] .q-page[pg="IFrame"][layer="2"] { top: 0; height: 100%;}
}


/* support orientation: portrait only >> data table */
@media only screen and (max-device-width : 768px) and (orientation : portrait)  {
	/* .c-style .q-datatable.q-datatable-pill { border-spacing: 0;}
	.c-style .q-datatable.q-datatable-pill > tbody > tr > td:first-child { border-radius: 8px 0 0 0 !important;}
	.c-style .q-datatable.q-datatable-pill > tbody > tr.parent > td:last-child { border-radius: 0 8px 0 0 !important}
	.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr.parent > td { border-bottom: 0 !important; padding: 12px;}
	.c-style .q-datatable.q-datatable-pill > tbody > tr.child > td:last-child { border: 0 !important; box-shadow: none; border-radius: 0 0 8px 8px !important; padding: 0;  background-color: transparent;}
	.c-style .q-datatable.q-datatable-pill tbody tr.parent,
	.c-style .q-datatable.q-datatable-pill tbody tr.child { box-shadow: none; }
	.c-style .q-datatable.q-datatable-pill tbody tr.child td.child ul { width: 100%; padding: 0 12px 12px; border: 1px solid var( --color-line); border-top: 0; margin-bottom: 12px; background: #ffffff; border-radius: 0 0 8px 8px; margin-top: -4px; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.10);}
	
	
	.c-style .q-datatable.dataTable.q-datatable-pill > thead {  visibility: collapse;}
	.c-style table.dataTable.q-datatable-pill>tbody>tr.child ul.dtr-details>li { border-bottom: 0; padding:0 0 8px 0;}
	.c-style table.dataTable.q-datatable-pill>tbody>tr.child ul.dtr-details>li:last-child { padding-bottom: 0;}
	.c-style table.dataTable.q-datatable-pill>tbody>tr.child span.dtr-title { display: block; font: normal 12px/18px var(--font-family-body); color: var(--text);}
	.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr.parent > td.name { font: bold 14px/20px var(--font-family-body);} */

	/* .c-style .c-page-body { overflow-x: auto; } */
	.c-style[data-mode="action"] .c-page-body,
	.c-style[data-mode="view"] .c-page-body { overflow-x: hidden; }
	.c-style .c-page-body-header.container { position: sticky; left: 0; z-index: 4;}
	.c-style .c-datatable-pill-wrapper { padding-left: var(--padding-mb); width: calc(100% + (2 * var(--padding-mb))); margin-left: calc(-1 * var(--padding-mb)); }
	.c-style .c-datatable-pill-wrapper.dataTables_wrapper { margin-top: -12px; }
	.c-style .q-datatable.q-datatable-pill { padding-right: var(--padding-mb); }
	.q-datatable.dataTable .btn.q-datatable-edit { --btn-md-height: 36px; }
	.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr > td { padding: 12px 16px; }
	/* .c-style .q-datatable.q-datatable-pill > tbody > tr > td.dtfc-fixed-right:last-child { right: -2px !important; } */

	/* .container.c-page-body-list .q-table { padding-left: var(--padding-mb); width: calc(100% + (2 * var(--padding-mb))); margin-left: calc(-1 * var(--padding-mb)); overflow-x: unset !important; max-width: unset; }
	.container.c-page-body-list .q-table .q-table-header,
	.container.c-page-body-list .q-table .q-table-row { width: fit-content; padding-right: calc(var(--padding-mb) - 8px); } */

	/* .c-page-body-list .q-table-col.q-table-col-fixed-right.q-table-groupaction:before,
	.c-page-body-list .q-table-col.q-table-col-fixed-right.q-table-groupaction::after, */
	.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable td.dtfc-fixed-right:last-child:before,
	.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable td.dtfc-fixed-right:last-child:after { visibility: hidden; }
}


/*  Announcement Engage / Annoucement App */
@media(max-width:768px) {
    .q-page.c-style[layer="2"][pg="myannouncement-view"],
    .q-page.c-style[layer="2"][pg="myannouncement-view"] { position: absolute; top: 0;}
    /* .q-preview-file .c-toast { z-index: 12;} */

    .c-page-group-single .c-content-body.c-post-detail { padding-bottom: 0;}
    /* .c-post-detail .c-card .card-body { padding: 12px 12px 24px !important;} */

    .c-post-detail .c-myannounce-title { font: var(--typo-page-subtitle);}
	.c-myannounce-heading .pinnedIcon i { font-size: 10px; }

    .c-content-grid-detail .c-file-upload-list { max-width: 300px;}

    .ItemOnboard { margin-bottom: 8px;}
    .c-myannounce-listgroup .ItemOnboard { margin-bottom: 12px;}

    .t1_location.location .c-modal-announcement-location.fade:not(.show) { opacity: 1; display: block;} 

	
	[page*="EngageSetSurvey"] .container.c-page-body-list .divItemList.q-table,
	[page*="EngageSetAnnounce"] .container.c-page-body-list .divItemList.q-table,
	[page*="EngageSetAgreement"] .container.c-page-body-list .divItemList.q-table { min-height: 300px;}
}



/* To do : Move to Bigure */
@media (max-width:768px) {
	.divBoard[data-type="Home"] .container { padding: 12px var(--padding-home-mb) 0; }

	.b-board .b-board-column { padding: 0; box-shadow: none; background-color: transparent; }
	.b-board .b-board-column .q-info-page,
	.b-board .b-board-column .c-page-group,
	.b-board .b-board-column .c-page-sidebar { background-color: transparent; }
	.b-board .b-board-column .c-sidebar-body,
	.b-board .b-board-column .c-page-body,
	.divBoard .widgetItem .q-layout-page,
	.b-board .b-box-row-item,
	.b-board .b-board-column .q-info-page  { overflow: unset !important; }
	.b-board .b-board-column [page="p/wise/QbicMyCourses"] .divItemList.row { padding: 0; gap: 6px; grid-auto-columns: unset; grid-template-columns: repeat(2, 1fr); }

	.b-board .b-board-column .list-group-item { padding: 12px !important; background-color: #FFFFFF; border-radius: 8px; /*box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);*/ }
	.b-board .b-board-column .list-group-item + .list-group-item { margin-top: 8px; }
	.b-board .b-board-column .list-group-item + .list-group-item::after { opacity: 0; }

	.b-board .b-board-row-item { padding: 0; width: 100%; }

	.b-board .b-board-column .b-header-widget { margin: 0 0 12px 0; align-items: center; }
	.b-board .b-board-column .b-header-widget .btn span { /*display: none;*/ }

	.b-board .b-board-column .c-sidebar-body { margin: 0 var(--padding-home-mb); }

	/* .b-board .b-board-column .c-sidebar-body { padding: 0 12px; } */

	.b-board .b-board-column .b-widget-item[data-type="APPS"] { background-color: #FFFFFF; padding: 24px 16px; margin-left: calc(-1 * var(--padding-home-mb)); margin-right: calc(-1 * var(--padding-home-mb)); }
	.b-board .b-board-column .b-widget-item[data-type="APPS"] .b-header-widget { display: none !important; }
	.b-board .b-board-column [data-type="APPS"] .c-box-grid { grid-gap: 24px 12px; }
	.b-board .b-board-column [data-type="APPS"] .c-box-grid .c-btn-grid span { font: var(--typo-body-sm); }
	.b-board .b-board-column [data-type="APPS"] .c-box-grid .c-btn-grid i, 
	.b-board .b-board-column [data-type="APPS"] .c-box-grid .c-btn-grid output { margin-bottom: 8px; }

	.b-board .b-board-column [data-type="APPS"][data-list="1"] .c-box-grid,
	.b-board .b-board-column [data-type="APPS"][data-list="2"] .c-box-grid,
	.b-board .b-board-column [data-type="APPS"][data-list="3"] .c-box-grid,
	.b-board .b-board-column [data-type="APPS"][data-list="4"] .c-box-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr !important; }
	.b-board .b-board-column [data-type="APPS"][data-list="5"] .c-box-grid,
	.b-board .b-board-column [data-type="APPS"][data-list="6"] .c-box-grid,
	.b-board .b-board-column [data-type="APPS"][data-list="7"] .c-box-grid,
	.b-board .b-board-column [data-type="APPS"][data-list="8"] .c-box-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr !important; }

	.b-board [data-type="APPS"] .c-box-grid .c-btn-grid { margin-bottom: 0; }

	.b-board .b-board-column .q-roadmap-table {padding: 0; display: flex; flex-direction: column; gap: 8px; }
	.b-board .b-board-column .q-roadmap-table .q-table-row-group { border: 0; border-radius: 8px; /*box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);*/ padding: 12px 16px; }
	.b-board .b-board-column .q-roadmap-table .q-table-row .q-table-fldmedia { display: none; }

	.divBoard .divMainBox .divDrawBox { order: -1; }

	.b-board .b-board-column .q-roadmap-table-bar-content { margin: 0; }
	.b-board .b-board-column .q-roadmap-table-bar { margin-top: 12px; }
	.b-board .b-board-column .q-roadmap-table-content .fld_name.q-ellipsis { margin: 0; padding: 0; }


	.b-board .b-board-column .divItemList.row .divCourseItem .card { border: 0; border-radius: 8px; /*box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);*/ }

	.b-board .b-board-column .b-reward-widget,
	.b-board .b-board-column  [for="widget"] .HXL,
	.c-page-intro-widget,
	.divBoard .b-board-column .widgetItem .container.c-page-intro-widget,
	[data-type="Home"] .b-board .b-board-column [page*="QbicInbox"] .HN,
	.divBoard .b-board-column .widgetItem .HFAIL { border-radius: 8px; /*box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);*/ padding: 24px 12px 8px; background-color: #ffffff; }
	.b-board .b-board-column .b-reward-widget .b-reward { margin-top: 12px; padding: 0; }
	.b-board .b-board-column .b-reward-widget .b-myreward { margin-top: 12px; gap: 8px; }
	.b-board .b-board-column .b-reward-widget .b-reward-point { padding: 12px; border: 0; }

	/* update style widget reward */ 
	.b-board .b-board-column .b-reward-widget { padding: 12px;}
	.b-board .b-board-column .b-reward-widget .btn.btnViewHistory { height: 32px; align-items: baseline; font: var(--typo-body-md); gap: 0; padding: 0;}
	.b-board .b-board-column .b-reward-widget .btn.btnViewHistory i { padding: 8px; }
	.b-reward .btn.btn-xs { display: flex; align-items: baseline;}

	/* .b-bigure-board[data-type="Home"] .c-skeleton.c-skeleton-widget { margin: 0 var(--padding-home-mb); } */
	.b-board .b-board-column .b-widget-item[data-type="APPS"] .c-skeleton.c-skeleton-widget { margin: 0; }

	.b-bigure-board[data-type="Home"] .q-qbic-skeleton-grid.q-view-course-filter,
	.b-bigure-board[data-type="Home"] .q-roadmap-table .HM.q-item-mockup.q-table-row { display: none !important; }

	.b-widget-item .c-page-sidebar .list-group-content { flex-direction: column; }
	.b-widget-item .c-page-sidebar .list-group-content .actionBar { margin: 0; margin-top: 16px; }

	.divBoard .divDrawBox .divItemList { display: flex; flex-direction: column; }
	/* .divBoard .divDrawBox .boxItem.c-widget-apps { order: -1; } */

	/* .b-board .b-board-row-item .b-announce { padding: 0 var(--padding-home-mb); } */
	.c-myannounce-listitem-item { gap: 12px !important; padding: 12px !important; background-color: #FFFFFF; border-radius: 8px; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08) !important; border: 0; }
	.c-myannounce-listitem-item .c-myannounce-img { width: 88px !important; min-width: 88px !important; height: 66px !important; min-height: 66px !important; }
	.c-myannounce-listitem-item + .c-myannounce-listitem-item { margin-top: 8px !important; }
	.c-myannounce-content .c-myannounce-filecount { max-width: 100%; }
	.c-myannounce-content { grid-template-columns: 1fr; gap: 6px; }
	.c-myannounce-content .c-myannounce-content-left { gap: 6px; }
	.c-myannounce-content .c-myannounce-info { min-width: 100%; max-width: 100%; text-align: left; }
	.c-myannounce-content .c-correspondent-heading-text { flex-direction: column; gap: 3px; align-items: flex-start; }
	.c-myannounce-content .c-correspondent-heading-text .c-ellipsis { width: 100%; }
	.c-myannounce-content .c-correspondent-heading-text .c-separate { display: none; }
	.c-myannounce-content .c-myannounce-correspondent { /*align-items: baseline; รูปคนกับชื่อ ไม่ชิดบนเหมือนกันกับหน้าอื่น ๆ */ align-items: flex-start; }

	.c-myannounce-listgroup .c-myannounce-listitem-item + .c-myannounce-listitem-item { margin-top: 12px !important; }
	.c-myannounce-listgroup .c-myannounce-title { display: block !important; white-space: nowrap !important; }

	.b-header-widget .b-header-widget-name { font-size: 1rem; }
	.b-header-widget-viewall .btn { height: 32px; }

	.container.c-page-body-list .q-table { max-width: 100%; overflow-x: auto; overflow-y: clip;}

	
	.c-upload-thumbnail-circle.q-upload-cover { flex-direction: row; flex-wrap: nowrap; align-items: center;}
	.c-upload-thumbnail-circle.q-upload-cover .q-cover-img { min-width: 64px; min-height: 64px;}

	/* font size icon ถ้า PC 14px เปลี่ยนเป็น 16px / ถ้า เจอ 12px เปลี่ยนเป็น 14px */
	.c-style .select2-container--default .select2-selection--single .select2-selection__arrow::before { font-size: 14px;}
	.c-style .input-group-append .input-group-text i,
	.c-input-group-search .input-group-prepend .btn i { font-size: 16px; min-width: 16px; height: 16px; }

	/*  support > c-page-content MB กรณที่ content น้อย ต้องไม่เกิด scroll */
	/* [pg="myannouncement-view"] .c-page-body > .container,
	[pg="myannouncement-view"] .c-page-group { height: 100%;}
	[pg="myannouncement-view"] .c-page-content { min-height: auto;} */


	.c-page-body-list .q-table-row-group { border: 0;}

	/* TABLES CUSTOM USING DIV */
	.c-scroll-tablediv .c-tablediv { min-width: 800px;}

	.c-skeleton-custom-widget-inbox { background: #FFFFFF; border-radius: 8px; padding: 16px 12px !important; border: 0; margin-top: 20px; }
	.c-skeleton-custom-widget-inbox + .c-skeleton-custom-widget-inbox { margin-top: 8px; border: 0; }

	.c-skeleton-custom-widget-announcement { background: #FFFFFF; border-radius: 8px; padding: 16px 12px !important; border: 0; margin-top: 20px; }
	.c-skeleton-custom-widget-announcement + .c-skeleton-custom-widget-announcement { margin-top: 8px; border: 0; }

	.c-skeleton-custom-widget-group { gap: 6px; }
	.c-skeleton-custom-widget-mycourse { border: 0; }
	.c-skeleton-custom-widget-mycourse:last-child { display: none; }

	.c-skeleton-custom-widget-announcement {
		--skt-row-h: 64px;
		--skt-col-w: 372px;
		padding: 20px 0;
		--skt-img-w: 84px;
	}
	
	.c-skeleton-custom-widget-announcement .c-skeleton-row::after {
		min-height: var(--skt-row-h);
		background: 
					var(--skt-round-border), 
					var(--skt-round), 
					var(--skt-round), 
					var(--skt-round), 
					var(--skt-round);
		background-size: 
						var(--skt-img-w) 64px, 
						min(60%, 401px) var(--skt-col-h), 
						20% var(--skt-col-h), 
						1px var(--skt-col-h), 
						20% var(--skt-col-h);
		background-position: 
							left top, 
							calc(var(--skt-img-w) + 12px) top, 
							calc(var(--skt-img-w) + 12px) calc(var(--skt-col-h) + 8px), 
							calc(var(--skt-img-w) + 12px + 20% + 8px) calc(var(--skt-col-h) + 8px), 
							calc(var(--skt-img-w) + 12px + 25% + 8px + 8px) calc(var(--skt-col-h) + 8px);
		background-repeat: no-repeat;
	}

	.c-skeleton-custom-widget-mylearningpath {
		--skt-row-h: 106px;
		--skt-col-h: 20px;
		--skt-img-w: 112px;
		border: 0;
		margin-top: 20px;
	}
	.c-skeleton-custom-widget-mylearningpath + .c-skeleton-custom-widget-mylearningpath { margin-top: 8px; }
	.c-skeleton-custom-widget-mylearningpath .c-skeleton-row::after {
		min-height: var(--skt-row-h);
		background: 
					var(--skt-round), 
					var(--skt-round), 
					var(--skt-round), 
					var(--skt-round), 
					var(--skt-round);
		background-size: 
						min(calc(100% - 95px - 46px), 324px) var(--skt-col-h), 
						min(calc(100% - 54px - 46px), 349px) 8px,
						min(40%, 92px) 28px,
						min(calc(100% - 20px), 95px) var(--skt-col-h), 
						min(20%, 54px) 18px;
		background-position: 
						left 0, 
						left calc(var(--skt-col-h) * 2 + 12px),
						left bottom,
						left calc(var(--skt-col-h) + 6px),
						right calc(var(--skt-col-h) * 2 + 6px);
		background-repeat: no-repeat;
	}
	
	.c-skeleton-custom-widget-rewardcontainer { padding: 16px 12px; border-radius: 8px; background: #FFFFFF; margin-top: 20px; }
	.c-skeleton-custom-widget-rewardpoint { margin-top: 0; }

	/* EMPTY STATE */
	.c-emptystate { padding: 120px 16px;}

	#divPortal .pswp__button--arrow--left {
		left: 10px;
	}
	#divPortal .pswp__button--arrow--right {
		right: 10px;
	}
	#divPortal .pswp__button--arrow--left, 
	#divPortal .pswp__button--arrow--right {
		width: 40px;
		height: 40px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
	}
	#divPortal .pswp__ui:not(.pswp__ui--hidden) .pswp__button--arrow--left,
	#divPortal .pswp__ui:not(.pswp__ui--hidden) .pswp__button--arrow--right {
		visibility: visible;
	}
	#divPortal .pswp__button--arrow--left:before, 
	#divPortal .pswp__button--arrow--right:before {
		background-image: url("../../../rsc/icon/preview-icon-4x.png?d=20231010_1615");
		background-size: 41px;
		background-repeat: no-repeat;
		display: block;
		height: 32px;
		width: 32px;
		margin: auto;
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		background-color: transparent;
		transform: scale(0.75);
		-webkit-transform: scale(0.75);
		-moz-transform: scale(0.75);
		-ms-transform: scale(0.75);
		-o-transform: scale(0.75);
	}
	#divPortal .pswp__button--arrow--left:before {
		background-position: -9px -480px;
	}
	#divPortal .pswp__button--arrow--right:before {
		background-position: -9px -512px;
	
	}

	/* setting report filter (copy bigure) */
	.c-diagnosis .b-table-report-heading { align-items: flex-end;}
	.c-diagnosis .b-table-report-heading .b-dropdown-tablereport-option .dropdown-menu { min-width: fit-content;}

	/* style Modal Progress */
	.c-modal-progress.modal.c-modal:not(.c-modal-right) .modal-dialog { max-width: 100%;}
	.c-modal-progress.modal.c-modal .modal-body { justify-content: center; font-size: 16px; line-height: 24px;}
	.c-modal-progress .modalTxt { height: auto;}
	
}

@media (max-width:768px) and (min-width:768px) {
	.divBoard[data-type="Home"] .container { --padding-mb: 24px; padding: 24px var(--padding-mb); }
	.divBoard[data-type="Home"] .divMainBox { flex-wrap: nowrap; gap: 24px; }
	.divBoard[data-type="Home"] .divMainBox .divDrawBox { order: unset; width: 340px !important; }
	.divBoard[data-type="Home"] .b-board .b-board-column { padding: 16px 20px; background-color: #FFFFFF; }
	.divBoard[data-type="Home"] .b-board .b-board-column .b-widget-item[data-type="APPS"] { padding: 0; margin: 0; }
	.divBoard[data-type="Home"] .b-board .b-board-column .b-reward-widget,
	.divBoard[data-type="Home"] .b-board .b-board-column [for="widget"] .HXL,
	.divBoard[data-type="Home"] .c-page-intro-widget,
	.divBoard[data-type="Home"] .b-board-column .widgetItem .container.c-page-intro-widget,
	.divBoard[data-type="Home"] .b-board .b-board-column [page*="QbicInbox"] .HN { padding: 0; }

	.divBoard[data-type="Home"] .b-board .b-board-column .list-group-item { padding: 16px 0 !important; }
	.divBoard[data-type="Home"] .c-page-sidebar .list-group-item + .list-group-item { margin-top: 0; }
	.divBoard[data-type="Home"] .b-board .b-board-column .list-group-item + .list-group-item::after { opacity: 1; }
	.divBoard[data-type="Home"] .b-board .b-board-column .b-header-widget .btn span { display: flex; }
	.divBoard[data-type="Home"] .b-board .b-board-column .q-roadmap-table .q-table-row-group { border: 1px solid #E3E6E8; padding: 16px; border-radius: 12px; }
	.divBoard[data-type="Home"] .b-widget-item [page*="QbicMyRoadmap"] div[class*=col-] { padding-left: 12px; padding-right: 12px; }
	.divBoard[data-type="Home"] .b-board .b-board-column .b-widget-item[data-type="APPS"] .b-header-widget { display: flex !important; }
	.divBoard[data-type="Home"] .b-header-widget .b-header-widget-name { font-size: 1.125rem; }
	.divBoard[data-type="Home"] .b-board .divDrawBox [data-type="APPS"] .c-box-grid,
	.divBoard[data-type="Home"] .b-board .divDrawBox [data-type="APPS"][data-show="ShowLess"] .c-box-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr 1fr;  grid-gap: 0 16px; }
	.divBoard[data-type="Home"] .b-board [data-type="APPS"] .c-box-grid .c-btn-grid span
	/*#divPortal .modal.divModalHyperDocMenu .modal-body .c-btn-grid span*/ { font-size: 12px; font-style: normal; font-weight: 700; line-height: 20px; color: #6C6D6E; }
	.divBoard[data-type="Home"] .c-myannounce-listitem-item { padding: 0 !important; gap: 20px !important; }
	.divBoard[data-type="Home"] .c-myannounce-listitem-item + .c-myannounce-listitem-item { padding-top: 16px !important; margin-top: 16px !important; }
	.divBoard[data-type="Home"] .c-myannounce-content,
	.divBoard[data-type="Home"] .c-myannounce-title { --line-height: 1.42; font-size: 14px; }
	.divBoard[data-type="Home"] .b-board .b-board-column .c-emptystate .c-emptystate-text,
	.divBoard[data-type="Home"] .b-board .b-board-column .c-emptystate .c-emptystate-title,
	.divBoard[data-type="Home"] .divBoard[data-type="Home"] .c-page-sidebar .c-list-text,
	.divBoard[data-type="Home"] .c-myannounce-filecount,
	.divBoard[data-type="Home"] .c-correspondent-heading-text,
	.divBoard[data-type="Home"] .c-myannounce-heading-group .c-myannounce-acknowledgetime { --line-height: 1.42; font-size: 11.9px; } 
	.divBoard[data-type="Home"] .c-myannounce-content .c-correspondent-heading-text { flex-direction: row; gap: 8px; align-items: center; }
	.divBoard[data-type="Home"] .c-correspondent-heading-text .c-separate { display: block; }
	.divBoard[data-type="Home"] .c-myannounce-content .c-myannounce-content-left { gap: 8px; }
	.divBoard[data-type="Home"] .divActionRequired .c-badge { --line-height: 1.42; font-size: 10.5px !important; }
	.divBoard[data-type="Home"] .b-widget-item .c-page-sidebar .list-group-item .c-list-title { --line-height: 1.42; font-size: 14px; }
	.divBoard[data-type="Home"] .b-widget-item .c-page-sidebar .list-group-content { flex-direction: row; align-items: flex-start; }
	.divBoard[data-type="Home"] .b-widget-item .c-page-sidebar .list-group-content .actionBar { margin-top: 6px; }
	.divBoard[data-type="Home"] .b-board [data-type="APPS"] .c-widget-btn-show, .c-widget-btn-show { --line-height: 1.42; font-size: 14px; }

	.divBoard[data-type="Home"] ~ .modal.divModalHyperDocMenu .modal-dialog { max-width: 680px !important; width: 100% !important; flex-direction: row; margin: 1.75rem auto; }
	.divBoard[data-type="Home"] ~ .modal.divModalHyperDocMenu .modal-dialog .modal-content { min-height: unset !important; max-height: 640px !important; border-radius: 12px; }
	.divBoard[data-type="Home"] ~ .modal.divModalHyperDocMenu .close { --btn-md-height: 32px; right: -8px; top: -8px; position: relative; margin-bottom: -8px; }
	.divBoard[data-type="Home"] ~ .modal.divModalHyperDocMenu .modal-dialog .modal-content .modal-header { padding: 20px !important; padding-bottom: 16px !important; filter: unset !important; }
	.divBoard[data-type="Home"] ~ .modal.divModalHyperDocMenu .modal-title { filter: unset !important; padding-top: 0; }

	/* .b-board .b-board-column .c-emptystate .c-emptystate-title {  } */

	
	#divPortal #p24 .c-btn-grid .dropdownMenuPin.dropdown.show { position: unset;}
	#divPortal #p24 .c-btn-grid .dropdownMenuPin .dropdown-menu.show { right: 0 !important; left: 0; top: 2px !important; margin: auto; min-width: 68px; width: 68px; transform: none !important;}
}