:root {
	--btn-xl-height: 40px;
	--ascent: var(--color-qcolor3);
	--default: #131313;
	--text: #545555;
	--light: #E3E6E8;
	--grey: #888888;
	--darkgrey: #6C6E6E;

	--dark: #3c3d3d !important;
	--outline-dark: #888888;
	--txt-dark: #3C3D3D;
	
	--table-line-header: #D7DADC;
	--table-line: #E3E6E8;
	--table-font-header: bold 0.85rem/var(--line-height) var(--font-family-body);
	--table-font-body: normal 0.925rem/var(--line-height) var(--font-family-body);

	--color-line: #E3E6E8;
	--color-line-darker: #D7DADC;
	--background-body: #FFFFFF;
	--background-home: #F0F3F8;

	--font-family-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	--secondary-txt: #545555;
	--secondary-border: #E3E6E8;
	--secondary-hover-bg: #EFF2F4;
	--secondary-hover-txt: #545555;

	--height-header: 48px;

	/* BUTTONS */
	--btn-xs-font: var(--typo-bold-body-md);
	--btn-sm-font: var(--typo-bold-body-md);
	--btn-md-font: var(--typo-bold-body-lg);
	--btn-md-padding: 6px 12px;
	--btn-md-icon: 12px;

	--btn-xl-minwidth: 1px;
	--btn-xl-padding: 6px 12px 6px 14px;
	--btn-xl-font: var(--typo-bold-body-lg);
	--btn-xl-icon: 12px;

	--btn-xs-singleicon: 12px;
	--btn-sm-singleicon: 12px;
	--btn-md-singleicon: 12px;
	--btn-lg-singleicon: 12px;
	--btn-xl-singleicon: 12px;

	/* dropdown */
	--dropdown-border: #E3E6E8;
	--dropdown-option-spacing: 8px 12px;
	--dropdown-option-focus-bg: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary);
	--dropdown-option-hover-bg: #EFF2F4;
	--dropdown-option-color: #131313;
	--lookup-option-padding: 8px 12px;

	--form-control-txt: #131313;

	--form-control-hover-border: #A7A9AB;
	--form-control-hover-bg: #FFFFFF;
	--form-control-focus-border: #545555;
	--form-control-focus-shadow: 0px 3px 8px 0px #00000014;
	--form-control-focus-prepend-shadow: 5px 3px 8px 0px #00000014;
	--form-control-focus-append-shadow: 5px 3px 8px 0px #00000014;

	--form-control-disabled-border: #E3E6E8;
	--form-control-disabled-bg: #EFF2F4;
	--form-control-disabled-txt: #545555;
	--form-control-disabled-icon: #545555;

	--form-control-readonly-border: #E3E6E8;
    --form-control-readonly-bg: #EFF2F4;

	/* header */
	--table-header-bg: #FFF;
	--table-header-color: #131313;

	/* Status */
	--status-color: #545555;
	--status-ontrack: #4C91F8;
	--status-behind: #E73C16;
	--status-complete: #61D39C;
	--status-notstarted: #545555;
	--status-potentialdelay: #545555;
	--status-cancelled: #545555;

	/* COLORS */
	--danger: #EC5D55 !important;
	--success: #61D39C !important;
	--warning: #FFCD15 !important;

	/* Row,Column */
	--coumn-gap: calc(24px / 2);

	/* Form control */
	--form-control-placeholder: #888;
	--form-control-border: #E3E6E8;
	--form-control-height: 36px;
	--form-control-padding: 7px 12px;

	--sidebar-size: 292px;
	--content-menu-size: 187px;
	--content-padding-x: 24px;

	--screen-height: calc(var(--vh, 1vh) * 100);
	--form-footer-height: 46px;

	--font-size: 14px;
	--line-height: 1.55;
	--line-height-mont: 1.42;

	--typo-mont-page-title: bold 1.725rem/var(--line-height) var(--font-family-mont);
	--typo-mont-page-subtitle: bold 1.15em/var(--line-height) var(--font-family-mont);
	--typo-mont-lg: bold 1rem/var(--line-height) var(--font-family-mont);
	--typo-mont-breadcumb: normal 0.85rem/var(--line-height) var(--font-family-mont);

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

	--typo-page-title: bold 1.425em/var(--line-height) var(--font-family-body);
	--typo-page-subtitle: bold 1.3rem/var(--line-height) var(--font-family-body);
	--typo-section-title: bold 1.15rem/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);

	/* gap */
	--gap-card-item: 16px;

	--line-top-inbox: 48px;

	--c-page-header-height: 48px;
}

input[type],
input[type]:focus,
textarea { outline: none;}

#divPortal .q-header .q-user-dropdownbtn{ border-radius: 6px; border-color: transparent; }
#divPortal[data-frame="1"] header, #divPortal[data-frame="1"] .q-page .c-page-header { display: none; } /*index.html -> pms project*/


/* device trust */
.modalDialogConfirm[data-theme="device-trust"] .modal-content { height: 607px; padding: 20px 30px 12px;}
.modalDialogConfirm[data-theme="device-trust"].c-style .ACT_NEW { width: 100%; flex-direction: column-reverse;}
.modalDialogConfirm[data-theme="device-trust"].c-style .ACT_NEW .btn{ height: var(--btn-lg-height); padding: var(--btn-lg-padding); font: var(--btn-lg-font);}
.modalDialogConfirm[data-theme="device-trust"].c-style .modal-header { justify-content: center; font-size: 24px;}

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

html { line-height: var(--line-height); font-size: var(--font-size); -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; }
body { color: var(--default); line-height: var(--line-height); font: var(--typo-body-lg); }
/* html { overflow: hidden;} */
img { object-position: var(--c-img-pos, center); object-fit: cover; font-size: 0;}

a { color: var(--color-qcolor8, var(--color-qcolor3)); }
[class^="c-ico-"], [class*=" c-ico-"] { letter-spacing: 0; }
.c-style p { margin: 0 !important; padding: 0 !important; }
.q-page.c-style,
.q-content-page { background: var(--background-body); }
.c-style .q-layout-page { padding: 0 !important; display: flex; flex-direction: column; }
/* .q-page.c-style > form { display: flex; } */

#p24 #aichat.aichat{ display: none;}
[bigure-link="home"] #p24 #aichat.aichat,
[bigure-link="home/"] #p24 #aichat.aichat,
[bigure-link="bigure_show/Engage/1.0"] #p24 #aichat.aichat { display: flex;}

.q-header.c-header { box-shadow: unset; }

.c-dot-red { position: relative; }

.c-dot-red .c-number-spinner::before { content: ""; background: #E73C16; width: 8px; height: 8px; position: absolute; top: -3px; left: -3px; border-radius: 50%; z-index: 3; }
.c-preload-page { position: absolute; z-index:3; top: var(--c-page-header-height); bottom: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; background-color: #ffffff; }

/* FONT FAMILY */
.divBoard[data-type="Home"] .divHeadBox,
.c-page-header,
.c-page-header-category { --font-family-body: var(--font-family-mont); font-family: var(--font-family-body); }

.c-style .c-bg-none { background: transparent !important; }
.c-style.c-bg-grey,
.c-style .c-bg-grey {  background: var(--background-home); }
.c-style.c-bg-grey:not(.c-page-body-header),
.c-style .c-bg-grey:not(.c-page-body-header),
.b-bigure-board:not(.c-board-report) {  background: var(--background-home); height: 100%; }
.c-style .c-bg-grey:not(.c-page-body-header) .b-board {  background: var(--background-home); }
.b-bigure-board[data-type="Home"] { /*grid-template-rows: max-content;*/ display: block; }

.c-pointer { cursor: pointer; }

.c-style .text-muted { color: var(--grey) !important; }
.c-style .text-underline { text-decoration: underline !important; }

.c-ellipsis { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.c-ellipsis-2-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.c-ellipsis-3-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }

.c-style .container { max-width: calc(1240px + 48px); padding-left: 24px; padding-right: 24px; }
.c-style[page="p/wise/QbicInbox"] .container { max-width: 100%; padding: 0; padding-left: max(calc((100% - 1240px) / 2), 24px); }
.c-style .container-small { max-width: calc(816px + 48px); }
.divBoard[data-type="Home"] .container { max-width: calc(1080px + 48px); }

/* ICON ALERT MSG */
.alert-ico { width: 80px; height: 80px; display: flex; }
.alert-ico-success { background-image: url('data:image/svg+xml,<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="0.5" width="80" height="80" rx="40" fill="white"/><rect y="0.5" width="80" height="80" rx="40" fill="%23E4FCEF"/><path d="M40.0001 17.2859C46.157 17.2859 52.0616 19.7316 56.4151 24.0852C60.7687 28.4387 63.2144 34.3433 63.2144 40.5001C63.2144 46.657 60.7687 52.5616 56.4151 56.9151C52.0616 61.2687 46.157 63.7144 40.0001 63.7144C33.8433 63.7144 27.9387 61.2687 23.5852 56.9151C19.2316 52.5616 16.7859 46.657 16.7859 40.5001C16.7859 34.3433 19.2316 28.4387 23.5852 24.0852C27.9387 19.7316 33.8433 17.2859 40.0001 17.2859ZM40.0001 69.0716C47.5778 69.0716 54.845 66.0614 60.2032 60.7032C65.5614 55.345 68.5716 48.0778 68.5716 40.5001C68.5716 32.9225 65.5614 25.6553 60.2032 20.2971C54.845 14.9389 47.5778 11.9287 40.0001 11.9287C32.4225 11.9287 25.1553 14.9389 19.7971 20.2971C14.4389 25.6553 11.4287 32.9225 11.4287 40.5001C11.4287 48.0778 14.4389 55.345 19.7971 60.7032C25.1553 66.0614 32.4225 69.0716 40.0001 69.0716ZM52.6118 35.2546C53.6609 34.2055 53.6609 32.5091 52.6118 31.4711C51.5626 30.4332 49.8662 30.422 48.8283 31.4711L36.4399 43.8595L31.1943 38.614C30.1452 37.5649 28.4488 37.5649 27.4109 38.614C26.3729 39.6631 26.3617 41.3595 27.4109 42.3975L34.5537 49.5403C35.6028 50.5894 37.2993 50.5894 38.3372 49.5403L52.6118 35.2546Z" fill="%2361D39C"/></svg>'); }
.alert-ico-fail { background-image: url('data:image/svg+xml,<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="80" height="80" rx="40" fill="white"/><rect width="80" height="80" rx="40" fill="%23545555" fill-opacity="0.22"/><g clip-path="url(%23clip0_4977_10687)"><path d="M40.173 16.7849C46.3298 16.7849 52.2344 19.2307 56.588 23.5842C60.9415 27.9377 63.3873 33.8424 63.3873 39.9992C63.3873 46.156 60.9415 52.0606 56.588 56.4141C52.2344 60.7677 46.3298 63.2135 40.173 63.2135C34.0162 63.2135 28.1115 60.7677 23.758 56.4141C19.4045 52.0606 16.9587 46.156 16.9587 39.9992C16.9587 33.8424 19.4045 27.9377 23.758 23.5842C28.1115 19.2307 34.0162 16.7849 40.173 16.7849ZM40.173 68.5706C47.7506 68.5706 55.0179 65.5604 60.3761 60.2022C65.7342 54.844 68.7444 47.5768 68.7444 39.9992C68.7444 32.4215 65.7342 25.1543 60.3761 19.7961C55.0179 14.4379 47.7506 11.4277 40.173 11.4277C32.5954 11.4277 25.3281 14.4379 19.9699 19.7961C14.6118 25.1543 11.6016 32.4215 11.6016 39.9992C11.6016 47.5768 14.6118 54.844 19.9699 60.2022C25.3281 65.5604 32.5954 68.5706 40.173 68.5706Z" fill="%23545555"/><path d="M40.1791 42.8121C41.9885 42.8121 42.9984 41.779 43.0405 39.8422L43.5874 26.0569C43.5874 24.1201 42.1147 22.6997 40.1371 22.6997C38.1594 22.6997 36.7288 24.077 36.7709 26.0139L37.2758 39.8422C37.3179 41.779 38.3278 42.8121 40.1791 42.8121ZM40.1791 54.089C42.241 54.089 44.0503 52.4102 44.0503 50.3013C44.0503 48.1491 42.2831 46.5135 40.1791 46.5135C38.1174 46.5135 36.3501 48.1923 36.3501 50.3013C36.3501 52.3671 38.1594 54.089 40.1791 54.089Z" fill="%23545555"/></g><defs><clipPath id="clip0_4977_10687"><rect width="57.1375" height="57.1375" fill="white" transform="translate(11.6055 11.4307)"/></clipPath></defs></svg>'); }

/* BREADCRUMBS */
.c-style .breadcrumb { background: transparent; margin: 0; padding: 0; }
.c-style .breadcrumb .breadcrumb-item { padding: 0; }
.c-style .breadcrumb-item.active,
.c-style .breadcrumb-item a { color: inherit; }
.c-style .breadcrumb-item a:hover { text-decoration: underline; }
.c-style .breadcrumb-item + .breadcrumb-item::before { margin: 0 8px; color: inherit; padding: 0; font-weight: normal; }

/* BUTTONS */
.c-style .btn { --primary: var(--color-qcolor8, var(--color-qcolor3)); }
.c-style .btn { border-radius: 6px; transition: none; gap: 6px;  }
.c-style .btn.btn-xl { gap: 14px; }
.c-style .btn .badge { border-radius: 50%; font: var(--typo-bold-body-sm); height: 16px; }
.c-style .btn.btn-xl .badge { margin-left: -10px; }

.c-style .btn-tooltips { width: 24px; height: 24px; background: transparent !important; color: #545555 !important; font-size: 14px; border: 0; min-width: fit-content; padding: 0; box-shadow: none !important; }

.c-style .btn-primary:not(:disabled):not(.disabled):hover { background: linear-gradient(to top, rgba(0, 0, 0, 30%), rgba(0, 0, 0, 30%)) var(--primary) !important; }
.c-style .btn-outline-primary { background: #FFFFFF; border: 1px solid var(--primary); }
/* .c-style .btn-outline-secondary:hover { background: var(--secondary-hover-bg); } */
.c-style .btn-outline-primary:not(:disabled):not(.disabled).active, 
.c-style .btn-outline-primary:not(:disabled):not(.disabled):active, 
.c-style .show > .btn-outline-primary.dropdown-toggle { border-color: var(--primary) !important; background: #FFFFFF !important; }
.c-style .btn-outline-secondary { border-color: var(--secondary-border); }
.c-style .btn-outline-secondary:hover { background: var(--secondary-hover-bg); }
.c-style .btn-outline-secondary:not(:disabled):not(.disabled).active, 
.c-style .btn-outline-secondary:not(:disabled):not(.disabled):active, 
.c-style .show > .btn-outline-secondary.dropdown-toggle { border-color: var(--secondary-txt) !important; background: #FFFFFF !important; }

.c-style .line-height-0 { line-height: 0; }

.c-style .q-btn-icon.btn-link-secondary:hover { background: var(--secondary-hover-bg); }

/* Buttons - Dark */
.c-style .btn-dark { border: 0; background-color: var(--dark); }
.c-style .btn-dark:not(:disabled):not(.disabled):hover { background: linear-gradient(to top, rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%)) var(--dark); }
.c-style .btn-dark:not(:disabled):not(.disabled).active,
.c-style .btn-dark:not(:disabled):not(.disabled):active,
.c-style .show>.btn-dark.dropdown-toggle { background: linear-gradient(to top, rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%)) var(--dark); box-shadow: none; }
.c-style .btn-dark.disabled,
.c-style .btn-dark:disabled { background-color: var(--disabled); border-color: var(--disabled); color: var(--disabled-txt); }

.c-style .btn-link-dark { color: var(--txt-dark); }

/* Buttons - Outline Dark */
.c-style .btn-outline-dark { background-color: #FFF; border-color: var(--outline-dark); color: var(--txt-dark); }
.c-style .btn-outline-dark:not(:disabled):not(.disabled):hover { background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 80%)) var(--dark); color: var(--txt-dark); }
.c-style .btn-outline-dark:not(:disabled):not(.disabled).active,
.c-style .btn-outline-dark:not(:disabled):not(.disabled):active,
.c-style .show>.btn-outline-dark.dropdown-toggle { background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 80%)) var(--dark); border-color: var(--outline-dark); color: var(--txt-dark); box-shadow: none; }
.c-style .btn-outline-dark.disabled,
.c-style .btn-outline-dark:disabled { border-color: var(--disabled); color: var(--disabled-txt); }

/* Button - Group */
.c-style .btn-group.btn-group-toggle { width: 100%; gap: 2px; }
.c-style .btn-group.btn-group-toggle .btn { min-width: 1px; padding: 0; border-radius: 4px !important; font: var(--typo-body-md); }
.c-style .btn-group.btn-group-toggle .btn:not(:disabled):not(.disabled).active { border-color: var(--color-qcolor8, var(--color-qcolor3)) !important; background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary) !important; }
.c-style .btn-group.btn-group-toggle > .btn-group.btn-group-toggle { padding: 0; padding-top: 8px; padding-bottom: 8px; }

/* LOADING */
.c-loading-ico,
.btnShowMore .spinner-border,
.c-style .c-redirect-box .spinner-border { width: 46px; height: 46px; border: 4px solid var(--primary); border-bottom-color: rgba(244, 244, 244, 0.9); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
.divScroll .btnShowMore { padding: 6px; overflow: hidden; }
.typeahead.dropdown-menu .btnShowMore .spinner-border { width: 32px; height: 32px; }
.c-loading-txt { margin-top: 12px; color: var(--text); font: var(--typo-body-md); text-align: center; }
.c-modal-loading .modal-content { height: 372px; }
.c-modal-loading .modal-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.c-modal-loading-label { margin-bottom: 24px; font: var(--typo-bold-body-xl); margin-top: 20px; }
.c-modal-loading-num { font: var(--typo-body-md); color: var(--text); }
.c-modal-loading .progress { margin-top: 4px; max-width: 290px; }

.c-loading-img { margin-bottom: 28px; }
.c-loading-title { font: var(--typo-section-title); color: #131313; margin-bottom: 8px; }
.c-loading-detail { color: #545555; font: var(--typo-body-lg); }

@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
} 

/* redirect */
.c-redirect-box{display: flex; flex-direction: column; text-align: center; color: #1E1E1E; font: var(--typo-body-xl); max-width: 800px; margin: 25vh auto 0}
.c-redirect-box .txtLandStatus{order: 1;}
.c-redirect-box .c-loading-ico{display:none; margin: auto auto 16px;}
.c-redirect-box .c-loading-ico img{ width: 100%;}
.c-redirect-box .txtLandStatus:not(:empty) + .c-loading-ico,
.c-redirect-box .txtLandStatus:not(:empty) + .c-loading-ico + .c-redirect{display:block;}

/* BLOCKUI */
.blockOverlay { background: rgba(36, 36, 37, 0.40) !important; opacity: 1 !important; }
.blockMsg.blockPage { border-radius: 12px; width: fit-content !important; height: fit-content !important; border: 0 !important; display: flex; flex-direction: column; background: #FFF !important; align-items: center; justify-content: center; text-align: center; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%); padding: 32px !important; }
.blockMsg.blockPage h1 { font: var(--typo-body-md); color: var(--text); margin: 0; margin-top: 12px; padding: 0; white-space: nowrap; }
.blockMsg.blockPage:before { content: ''; width: 46px; height: 46px; border: 4px solid var(--primary); border-bottom-color: rgba(244, 244, 244, 0.9); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }

/* TOOLTIPS */
.tooltip-inner { background: #424242; border-radius: 6px; font: var(--typo-body-md) !important;  padding: 4px 8px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12); position: relative; z-index: 1; }
.tooltip .arrow { width: 9px; height: 7px; margin: 0; display: flex; justify-content: center; z-index: 1; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12); }
.tooltip .arrow::before { content: '\e948'; font-family: 'pms-ico'; border: 0; font-size: 9px; color: #424242; line-height: 6px; }
.tooltip.bs-tooltip-bottom .arrow::before { transform: rotate(180deg); }
.tooltip-inner p { margin: 0; }
.tooltip .tooltip-inner > div + div { margin-top: 8px; }

/* BADGE */
.c-style .badge { --badge-color: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 90%)) var(--primary); --badge-text: var(--default); background: var(--badge-color) !important; color: var(--badge-text); border-radius: 4px; }
.c-style .badge.badge-danger { --badge-color: var(--danger); --badge-text: #FFF; }

/* TAGS */
#p24 .c-tag.badge { --badge-color: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary); font: var(--typo-body-lg); padding: 0; position: relative; border-radius: 4px; min-height: 24px; display: inline-flex; white-space: normal; text-align: left; }
.c-tag.badge:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 1px solid var(--primary); opacity: 0.3; border-radius: 4px; }
.c-tag-txt { padding: 2px 8px; display: flex; align-items: center; }
.c-tag.badge .btn { --primary: var(--color-qcolor3, var(--color-qcolor3)); height: 22px; width: 23px; min-width: 23px; position: relative; z-index: 2; margin: 1px; border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--text); }
.c-tag.badge .btn i { font-size: 8px; min-width: 8px; }
.c-tag.badge .btn:hover { background: linear-gradient(to top, rgba(255, 255, 255, 85%), rgba(255, 255, 255, 85%)) var(--primary); color: var(--text) !important; }

/* PROGRESS */
.c-style .progress { height: 4px; }
.c-style .progress-bar { background: var(--primary); }

.c-list-filerresult { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.c-list-filerresult .form-group { display: flex; gap: 8px; align-items: baseline; margin: 0 !important; }
.c-list-filerresult .form-group label { margin: 0; font: var(--typo-bold-body-md); color: var(--text); }
.c-list-filerresult-grouptag { display: flex; gap: 8px; flex-wrap: wrap; }

.c-accordion-separate { margin: 16px 0; }
.c-accordion { border-radius: 0; }
.c-accordion .c-accordion-card { border: 0; border-radius: 0; overflow: visible !important; }
.c-accordion-card-header { padding: 0; background-color: transparent; display: flex; align-items: center; flex-wrap: nowrap; }
.c-accordion .c-accordion-card:hover { box-shadow: none; }
.c-accordion-card-header { border: 0 !important; margin-bottom: 0 !important; }
.c-accordion-card-header .btn:not(.btn-submitAllDrafts) { --btn-md-icon: 12px; min-height: 32px; width: 100%; justify-content: flex-start; align-items: center; text-decoration: none; height: auto; font: var(--typo-bold-body-xl); color: var(--default); gap: 8px; padding: 0; }
/* .c-accordion-card-header .btn:not(:disabled) { border: 0 !important; padding: 0; } */
.c-accordion-card-header .btn i { color: var(--ascent); position: relative; transition: all 0.3s; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center;  }
.c-accordion-card-header .btn[aria-expanded="false"] i,
.c-accordion-card-header[aria-expanded="false"] .btn i { transform: rotate(-90deg); }
.c-accordion-card-header .btn[aria-expanded="false"] .dropdown-toggle i,
.c-accordion-card-header[aria-expanded="false"] .btn .dropdown-toggle i { transform: rotate(0); }
.c-accordion-card-header .btn .badge { margin-right: auto; background: none !important; height: auto; padding: 0; color: inherit; font: inherit; min-width: inherit; letter-spacing: 1px; }
.c-accordion-card-header .btn .badge::before { content: '('; }
.c-accordion-card-header .btn .badge::after { content: ')'; }
.c-accordion-card-header .btn .c-accordion-card-header-weight { font: var(--typo-body-lg) !important; color: #545555; }
.c-accordion .c-accordion-card .c-accordion-card-body { padding: 0 !important; gap: 0; display: block; padding-top: 12px !important; }
.c-accordion-card .c-accordion-card-body .q-datatable { border-radius: 8px; }
.c-accordion-card .q-datatable.dataTable > thead > tr > th { font: var(--typo-bold-body-md) !important; white-space: nowrap; }
.q-datatable.dataTable .btn[data-toggle="dropdown"] { border-radius: 8px; border-color: #E3E6E8; }
.q-datatable.dataTable .btn.q-datatable-edit { --btn-link-padding: 6px 20px; min-width: 100px; }

.c-accordion-card-header-weight { white-space: nowrap; color: var(--text); }
#accordionDrafts .c-accordion-card-header { display: flex; align-items: center; }
#accordionDrafts .c-accordion-card-header .btn.accordionItem { width: auto; flex-grow: 1; }
#accordionDrafts .c-accordion-card-header-weight { white-space: nowrap; }
#accordionDrafts .c-accordion-card-header .btn-tooltips { width: fit-content; height: 32px; min-height: 32px; min-width: 32px; justify-content: center; }
#accordionDrafts .c-accordion-card-header .btn-tooltips i { color: var(--text); margin-top: 0; }
#accordionDrafts .c-accordion-card-header .btn-submitAllDrafts { width: fit-content; margin-left: 4px; margin-right: 24px; margin-top: 0; height: 32px; min-height: 32px; }

.c-card:not(.c-performance-card.card-Detail) + .c-performance-card.card-Detail { margin-top: 20px; }

.c-progress-group { display: flex; align-items: center; align-items: flex-start; }
.c-progress-group .c-progress-left { flex-grow: 1; padding-right: 20px; }
.c-progress-group .progress { height: 4px; margin-top: 8px; margin-bottom: 4px; }
.c-progress-group .progress .progress-bar { background-color: var(--status-color) !important; }
.c-progress-label { font: var(--typo-body-md); color: var(--grey); }
.c-progress-group .c-progress-value { font: var(--typo-body-lg); color: var(--default); display: flex; align-items: baseline; }

.header-milestone .c-progress-group { align-items: center; max-width: 210px !important; --form-control-height: 36px; }
.header-milestone .c-progress-left { padding-right: 16px; }
.header-milestone .c-progress-group .form-control { max-width: 48px; margin-right: 8px; }

.c-status-ontrack,
.progress-bar[data-status="1"] { --status-color: var(--status-ontrack); }
.c-status-behind,
.progress-bar[data-status="11"] { --status-color: var(--status-behind); }
.c-status-complete,
.progress-bar[data-status="2"] { --status-color: var(--status-complete); }
.c-status-notstarted.c-performance-total-card::before { opacity: 0.5; }
.c-status-notstarted,
.progress-bar[data-status="0"] { --status-color: var(--status-notstarted); }
.progress-bar[data-status="10"] { --status-color: var(--status-potentialdelay); }
.progress-bar[data-status="12"] { --status-color: var(--status-cancelled); }

.q-datatable.dataTable .c-accordion-th-goal { font-weight: bold !important;  }

.c-datalayout-card .q-datatable.dataTable { --card-view: 3; border: 0 !important; }

.c-datalayout-card .c-accordion-card .dataTables_scrollHead { border: 0 !important; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable > thead { display: none; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable > tbody { display: grid; grid-template-columns: repeat(var(--card-view), 1fr); grid-column-gap: 16px; grid-row-gap: 16px; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable > tbody > tr { display: grid; border: 1px solid #E3E6E8; border-radius: 12px; padding: 12px; 
	grid-template-areas: 
	"goal action"
	"support support"
	"period period"
	"statusandprogress statusandprogress"
	"lastupdate lastupdate"; grid-template-columns: 1fr min-content; align-items: center; overflow: unset; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable > tbody > tr > td { border: 0 !important; padding: 0 !important; }
.c-datalayout-card .c-accordion-card .dtfc-right-top-blocker { display: none !important; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-goal { grid-area: goal; align-items: center; flex-wrap: wrap; padding-right: 8px !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: var(--typo-bold-body-xl) !important; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-support { grid-area: support; display: flex; overflow: hidden; flex-wrap: nowrap; white-space: nowrap; margin-top: 4px; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-category { grid-area: category; display: none; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-weight { grid-area: weight; display: none; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-period { grid-area: period; margin-top: 12px; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-statusandprogress { grid-area: statusandprogress; margin-top: 16px; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-lastupdate { grid-area: lastupdate; margin-top: 16px; color: var(--grey); display: flex; gap: 6px; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-lastupdate::before { content: '\e94a'; font-size: 12px; display: flex; margin: 4px 2px; font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-lastupdate i { font-size: 16px; margin: 2px 0; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-action { grid-area: action; }

.c-datalayout-card .c-accordion-card .dataTables_wrapper .dataTables_scroll { border: 0 !important; }

.q-accordition:not(.c-datalayout-card ) .c-accordion-card .q-datatable.dataTable .c-accordion-th-weight { width: 1%; }
.q-accordition:not(.c-datalayout-card ) .c-accordion-card .q-datatable.dataTable .c-accordion-th-action  { width: 1%; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-th-hide-noncard { display: inline-flex; }

.c-accordion-card .q-datatable.dataTable .c-accordion-th-hide-noncard { display: none; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-goal-support,
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-goal-category,
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .c-accordion-goal-weight { color: var(--grey); font: var(--typo-body-lg) !important; }
.c-accordion-goal-support { /*white-space: nowrap;*/ text-overflow: ellipsis; display: block; overflow: hidden; }
.c-accordion-goal-category { padding: 0 8px; margin: 0 8px; border-left: 1px solid #E3E6E8; border-right: 1px solid #E3E6E8; }

/* CARDS */
.c-style .c-card { border-radius: 0 !important; box-shadow: none !important; border: 0 !important; height: auto !important; position: relative; z-index: 0; }
.c-card .card-body { padding: 0 !important; gap: 0; min-height: 1px; }
.c-card .card-body.p-0 { padding: 0 !important; }
.c-action-card { display: flex; margin-top: 24px; justify-content: center; }
.c-action-card .btn { min-width: 185px; }
.c-card-title { font: var(--typo-bold-body-xl); margin-bottom: 16px; }

.c-performance-total { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0; }
.c-datalayout-action { height: 36px; border: 1px solid #E2E3E7; border-radius: 8px; background-color: #fff; display: flex; width: fit-content; padding: 3px 4px; gap: 4px; }
.c-datalayout-action .btn { --btn-md-height: 28px; border-radius: 6px !important; --primary: var(--ascent) }
.c-datalayout-action .btn:not(.active) { border: 0; color: var(--text) !important; }
.c-datalayout-action .btn:not(.active):hover { background: #EFF2F4 !important; } 
.c-style .c-datalayout-action .btn-outline-primary:not(:disabled):not(.disabled).active {background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 80%)) var(--primary) !important;}
.c-separate { height: 40px; width: 1px; background-color: #E2E3E7; display: block; }
.c-performance-total-right { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-top: auto; }
.c-performance-total-right .btn-primary { border-radius: 8px; }
.c-performance-total-right .c-datalayout-action .btn[class*="c-datalayout-"] { height: var(--btn-sm-height); min-width: var(--btn-sm-height);}
.c-performance-total-right .c-datalayout-action + .c-separate ~ .btn[class*="btn-create"] { height: 36px;}
.c-performance-total-heading { font: var(--typo-bold-body-xl); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.c-performance-total-heading-split { width: 1px; height: 19px; background-color: var(--grey); display: inline-block; }
.c-performance-total-heading-weight { color: var(--text); font: var(--typo-body-xl); }

.c-performance-total-left { max-width: 648px; width: 100%; }
.c-performance-total-cardgroup { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); max-width: 100%; width: 100%; }
.c-performance-total-card { max-width: 150px; border-radius: 6px; background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--status-color) !important; padding: 6px 12px 6px 16px; position: relative; overflow: hidden; }
.c-performance-total-card::before { content: ''; width: 5px; height: 100%; background-color: var(--status-color); display: block; position: absolute; left: 0; top: 0; }
.c-performance-total-label { font: var(--typo-body-md); color: var(--default); }
.c-performance-total-value { font: var(--typo-page-subtitle); color: var(--status-color); filter: brightness(0.8); }
.c-performance-total-card.HXL:not([style*="none"]) ~ .c-skeleton { display: none; }

.c-performance-dropdown { display: inline-flex; max-width: 285px; width: 100%; }
.c-performance-dropdown .btn { border-color: #E3E6E8; /*height: 62px;*/ min-height: 62px; height: auto; border-radius: 8px; width: 100%; padding-right: 21px !important; gap: 21px !important; padding-left: 16px; }
.c-performance-dropdown .btn::after { content: '\e910'; font-size: 20px; color: var(--text); height: 20px; width: 20px; margin-left: 16px; margin-right: 8px; display: flex; justify-content: center; align-items: center; font-family: 'qbic-icon-font' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 0; }
.c-style .c-performance-dropdown .dropdown-menu { width: 100%; max-width: 100%; }
.c-performance-dropdown-content { text-align: left; flex-grow: 1; min-width: 1%; }
.c-performance-dropdown-title { font: var(--typo-page-subtitle); color: var(--default) }
.c-performance-dropdown-date { font: var(--typo-body-lg); color: var(--text); }
.c-performance-dropdown .btn .c-performance-dropdown-title,
.c-performance-dropdown .btn .c-performance-dropdown-date { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.dropdown-menu .c-performance-dropdown-title { font: var(--typo-bold-body-lg); }
.dropdown-menu .c-performance-dropdown-date { font: var(--typo-body-md); }

.c-performance-card hr { border-color: #E3E6E8; }
.c-performance-card + .c-performance-card { border-top: 1px solid var(--color-line) !important; margin-top: 24px !important; padding-top: 24px; }
.c-performance-card[style*=none] + .c-performance-card { border: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.c-performance-card .c-accordion .c-accordion-card .c-accordion-card-body { padding-bottom: 16px !important; }

/* PAGE HEADER */ 
.c-page-header { background-color: var(--primary); color: #ffffff; padding-top: 4px; padding-bottom: 4px; min-height: var(--c-page-header-height); height: var(--c-page-header-height); display: flex; }
.c-page-header:not([data-breadcrumb="0"]) { padding-bottom: 2px; }
.divBoard .divHeadBox{background-color: var(--primary);}
.c-page-header .container { display: flex; align-items: center; height: 100%; }
.c-page-header .c-page-header-content { overflow: hidden; display: flex; flex-direction: column; }
.c-page-header .btn { width: 28px; height: 28px; margin-top: 18px; color: #ffffff !important; margin-left: -12px; background: transparent !important; border: 0 !important; }
.c-page-header .btn i { font-size: 12px !important; width: 12px; height: 12px; }
.c-page-header .btn:hover,
.c-page-header .btn:active,
.c-page-header .btn:not(:disabled):not(.disabled):active { background: transparent !important; color: #ffffff !important; }
.c-page-header-category { font: var(--typo-mont-breadcumb); line-height: var(--line-height-mont) !important; font-weight: 500;}
.c-page-header-title { font: var(--typo-mont-page-subtitle); line-height: var(--line-height-mont) !important; min-height: 0px; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-page-header[data-breadcrumb="0"] .btn { margin-top: 0; }

.c-page-body { position: relative; flex-grow: 1; overflow: auto; overflow-x: hidden; color: var(--default); }
.c-page-body-content { margin-top: 20px; margin-bottom: 20px; } 

/* MODAL */
.modal,
.c-modal.modal { background: rgba(36, 36, 37, 0.40); }
.modal-backdrop { display: none; }
.modal.c-modal:not(.c-modal-right) .modal-dialog { max-width: 504px; max-height: 640px; padding-left: 0; padding-right: 0; }
.modal.c-modal:not(.c-modal-right) .modal-content { border-radius: 12px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); border: 0; max-height: 640px; }
.modal.c-modal:not(.c-modal-right) .modal-header { padding-bottom: 16px !important; }
.modal.c-modal:not(.c-modal-right) .modal-header .close { border: 0; }
.modal.c-modal:not(.c-modal-right) .modal-footer { border: 0; padding: 12px 20px 20px 20px; gap: 12px; }
.modal.c-modal .c-form-content .form-group { margin-bottom: 0; }
.modal.c-modal .c-form-content .form-group + .form-group { margin-top: 16px; }
.modal.c-modal .col-form-label + .c-checkbox-group { margin-top: 8px; gap: 12px; }
.modal.c-modal .modal-header { border: 0; padding: 20px !important; align-items: baseline; gap: 8px; }
.modal.c-modal .modal-header .modal-title { color: var(--primary); filter: brightness(0.7); }
.modal.c-modal .modal-header .close { color: #545555 !important; opacity: 1; border: 0 !important; right: -8px; top: -8px; position: relative; margin-bottom: -8px; }
.modal.c-modal .modal-header .close:hover { background: #EFF2F4; }
.modal.c-modal .modal-header .close i { font-size: 12px !important; min-width: 12px; }
.modal.c-modal .modal-header .badge { margin-right: auto; background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 90%)) var(--primary); min-width: 24px; width: fit-content; height: 24px; border-radius: 6px; font: var(--typo-bold-body-md); color: var(--primary); align-self: center; }
.modal.c-modal .modal-body { padding: 20px; padding-top: 0; overflow-y: auto; }
.modal.c-modal .modal-footer { border-top: 1px solid #E3E6E8; padding: 14px 20px; justify-content: flex-start; }
.c-action-formcontent { margin-top: 24px; display: flex; justify-content: center; }
.modal.c-modal .modal-header .btn-back { width: 28px; height: 28px; min-width: 28px; margin-right: -4px; }

.c-form-content-indent { padding-left: 32px; }
.modal.c-modal .row.form-group .col-form-label { text-align: left; }

.modal.c-modal .row.form-group { margin-left: -8px; margin-right: -8px; }
.modal.c-modal .row.form-group > [class*="col-"],
.modal.c-modal .row.form-group > div.c-checkbox-group { padding-left: 8px; padding-right: 8px; }

.c-modal-search { margin-bottom: 16px; }
.c-modal-text { font: var(--typo-body-lg); }
.c-modal-contentbox { max-height: 96px; padding: 12px; border: 1px solid var(--color-line); border-radius: 8px; overflow: auto; margin-top: 16px; font: var(--typo-body-lg); }

.modal.c-modal .modal-dialog.modal-sm { max-width: 410px; }
.modal.c-modal .modal-dialog.modal-lg { max-width: 624px; }
.modal.c-modal .modal-dialog.modal-xl { max-width: 1024px; }

.modal.c-modal-right .modal-dialog.modal-sm { max-width: 410px; }
.modal.c-modal-right .modal-dialog { max-width: 600px; }
.modal.c-modal-right .modal-dialog.modal-lg { max-width: 870px; }
.modal.c-modal-right .modal-dialog.modal-xl { max-width: 1180px; }

/* MODAL RIGHT */
.modal.c-modal-right .modal-dialog { margin: 0; position: absolute; right: 0; height: 100%; padding: 0; width: 100%; }
.modal.c-modal-right .modal-dialog  { -webkit-transform: translate(25%, 0) !important; transform: translate(25%, 0) !important; }
.modal.c-modal-right.show .modal-dialog { -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; }
.modal.c-modal-right .modal-content {  height: 100%; border-radius: 0; overflow: hidden; max-height: none; }
.modal.c-modal-xl.c-modal-right .modal-dialog { max-width: 1180px; }

/* MODAL CONFIRM DIALOG */
.modalDialogConfirm.c-style .modal-dialog { max-width: 532px; }
.modalDialogConfirm.c-style .modal-content { border-radius: 12px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); }
.modalDialogConfirm.c-style .modal-header { padding: 12px 20px 16px; color: var(--primary); filter: brightness(0.7); }
.modalDialogConfirm.c-style .modal-header .close { border: 0; }
.modalDialogConfirm.c-style .modal-footer { border: 0; padding: 12px 20px 20px 20px; gap: 16px;justify-content: flex-start; }
.modalDialogConfirm.c-style .modal-body { padding: 20px; padding-top: 0; overflow-y: auto; }
.modalDialogConfirm.c-style .ACT_NEW { display: flex; gap: 16px; }
.modalDialogConfirm.c-style .ACT_NEW .btn { margin: 0 !important; min-width: 80px; }
.modalDialogConfirm.c-style .ACT_NEW .btn.btn-primary { order: -1; }
.modalDialogConfirm.c-style .form-group.modalItem:empty { display: none !important; }
.modalDialogConfirm.c-style .form-group.modalItem { margin-top: 0 !important; color: var(--default); font: var(--typo-body-lg); }
.modalDialogConfirm.c-style .btn-outline-secondary { border-color: var(--primary); color: var(--primary); }
.modalDialogConfirm.c-style .btn-outline-secondary:not(:disabled):not(.disabled):hover { background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary); color: var(--primary); }

.modalDialogConfirm.c-style .modal-dialog { -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; height: 100%; max-height: calc(100% - 3.5rem); }
.modalDialogConfirm.c-style .modal-content { max-height: calc(100vh - 3.5rem); overflow: hidden; }

/* ROW / COLUMN */
.row:not(.no-gutters) { margin-left: calc(-1 * var(--coumn-gap)); margin-right: calc(-1 * var(--coumn-gap)); }
.row:not(.no-gutters) > div[class*=col-],
div[class*=col-] { padding-left: var(--coumn-gap); padding-right: var(--coumn-gap); }

/* FORM */
.c-style .form-group hr { margin: 12px 0; width: 100%; }
.c-style .form-control { border-radius: 8px; transition: none !important;  }
.c-style .form-control:not(textarea) { line-height: var(--form-control-height); }
.c-style .form-control:hover:not(:focus),
.c-style .form-control:hover:not(:focus) + .input-group-append .btn { background: var(--form-control-hover-bg); }
.c-style .form-control:focus { box-shadow: var(--form-control-focus-shadow); background: var(--form-control-bg); border-color: var(--form-control-focus-border) !important; }
.c-style .input-group .form-control { border-radius: 8px; }
input[type='text'].e-form-control { max-height: var(--input-size); height: auto; }

.c-style .c-is-required .col-form-label::after,
.c-style .c-is-required.c-head-title-sub-form::after { content: '*'; }
.c-style .form-group .text.text-danger { display: none; }
.c-style .row.form-group.c-is-required .col-form-label:has([data-toggle="tooltip"]) {display: inline-flex; justify-content: flex-end;}
.c-style .row.form-group.c-is-required .col-form-label .btn[data-toggle="tooltip"] { order: 5; margin: 0; min-width: 32px;}

.c-style .form-control[disabled]:hover,
.c-style .form-control:disabled:hover { border-color: var(--form-control-disabled-border); background: var(--form-control-disabled-bg); cursor: default;}

.c-style .form-control:disabled, 
.c-style .form-control.disabled, 
.c-style .form-control:disabled + .input-group-append > *, 
.c-style .form-control[readonly], 
.c-style .form-control[readonly] + .input-group-append > *, 
.c-style input[type=file]:disabled::file-selector-button { border-color: var(--form-control-disabled-border) !important; background: var(--form-control-disabled-bg) !important; color: var(--form-control-disabled-txt); }
.c-style .form-control[readonly] + .input-group-append > * i { display: none;}

/* Form disabled but no value */
.c-style .form-control:disabled:placeholder-shown::placeholder { color: #888888 !important; }
.c-style .form-control:disabled:placeholder-shown { background: #FAFAFA !important; border-color: #E3E6E8 !important; }
.c-style .form-control:disabled:placeholder-shown + .input-group-append .btn { background: #FAFAFA !important; color: #A7A9AB; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Chrome, Safari, Edge, Opera */
input[type=number] { -moz-appearance: textfield; } /* Firefox */

.c-style .form-danger .form-control:focus, 
.c-style .form-danger .form-control, 
.c-style .form-danger .input-group-append .input-group-text, 
.c-style .form-danger .select2-container--default .select2-selection--single,
.c-style .form-danger .c-input-group-lookup .input-group-append .btn,
.c-style .form-danger .c-input-group-lookup.c-input-group-lookup-multigroup,
.c-style .form-danger .c-input-group-lookup.c-input-group-lookup-multigroup:focus-within,
.c-style .form-danger .input-group-append .btn { border-color: var(--danger) !important; }


:root {
	--file-type: var(--file-type-txt);
	--file-type-txt: "\e92f";
	--file-type-pdf: "\e92e";
	--file-type-ppt: "\e92d";
	--file-type-xls: "\e92c";
	--file-type-embedded: "\e92b";
	--file-type-zip: "\e92a";
	--file-type-audio: "\e929";
	--file-type-video: "\e928";
	--file-type-img: "\e927";
	--file-type-scrom: "\e926";
}

.row.form-group.form-group-vertical .col-form-label { text-align: left; font: var(--typo-bold-body-md); color: var(--default); margin-bottom: 4px !important; }

/* FORM - TEXTAREA + EXPAND MODAL */
.c-style textarea::-webkit-scrollbar-thumb { min-height: unset; }
.c-style textarea.form-control,
.c-style textarea.form-control:hover:not(:focus),
.c-style textarea.form-control:disabled,
.c-style textarea.form-control:disabled:placeholder-shown { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.59261 1.42637C8.77736 1.61113 8.77736 1.91068 8.59261 2.09543L1.79589 8.89215C1.61113 9.07691 1.31159 9.07691 1.12683 8.89216C0.942076 8.7074 0.942076 8.40785 1.12683 8.2231L7.92355 1.42637C8.10831 1.24162 8.40786 1.24162 8.59261 1.42637Z" fill="%23D7DADC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.87235 4.32316C9.0571 4.50792 9.0571 4.80746 8.87235 4.99222L4.68863 9.17593C4.50388 9.36069 4.20433 9.36069 4.01957 9.17593C3.83482 8.99118 3.83482 8.69163 4.01957 8.50688L8.20329 4.32316C8.38805 4.13841 8.68759 4.13841 8.87235 4.32316Z" fill="%23D7DADC"/></svg>') !important; background-repeat: no-repeat !important; background-position: right bottom !important; }
.c-style textarea.form-control:hover:not(:focus) { background-color: var(--form-control-hover-bg); }
.c-style textarea.form-control:disabled { background-color: var(--form-control-disabled-bg) !important; }
.c-style textarea.form-control:disabled:placeholder-shown { background-color: #FAFAFA !important; }
.c-group-textarea { display: flex; gap: 2px; }
.c-group-textarea .btn { margin-top: 4px; color: var(--grey); }
/* .c-style textarea.form-control:disabled + .tox-tinymce { pointer-events: none;}  ปิดใช้งานเพราะ script support เเล้ว*/
.c-style textarea.form-control:disabled + .tox .tox-editor-header,
.c-style textarea.form-control[readonly] + .tox .tox-editor-header { visibility: hidden;}
.c-style textarea.form-control:disabled + .tox .tox-sidebar-wrap,
.c-style textarea.form-control[readonly] + .tox .tox-sidebar-wrap { position: absolute; top: 0; left: 0; width:100%; height: 100%;} 
.c-style textarea.form-control:disabled + .tox .tox-edit-area__iframe { background: var(--form-control-disabled-bg)!important ; padding-top: 8px;}
.c-style textarea.form-control[readonly] + .tox .tox-edit-area__iframe { background: var(--form-control-disabled-bg)!important ; padding-top: 8px;}

/* FORM - UPLOADFILE */
.c-uploadfile { line-height: normal; }
.c-uploadfile:before { content: 'placeholder'; line-height: calc(var(--form-control-height) - 2px); visibility: hidden; display: block; margin-bottom: calc(-1 * (var(--form-control-height) - 2px)); z-index: -1; position: relative; padding: 0; }
.c-uploadfile-btn { border: 1px dashed var(--form-control-border); border-radius: 6px; padding: 9px 8px; gap: 0px; display: flex; justify-content: center; align-items: center; color: var(--text); background: #FFFFFF; position: relative; cursor: pointer; overflow: hidden; line-height: normal; margin-top: 0; min-height: 36px; flex-direction: column; }
.c-uploadfile-btn:hover { border-color: var(--form-control-hover-border); }
.c-uploadfile > .HF + .c-uploadfile-group .c-uploadfile-btn { margin-top: 0; }
.c-uploadfile-text { font: var(--typo-bold-body-lg); }
.c-uploadfile-btn input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; visibility: visible; opacity: 0; cursor: pointer; }
.c-uploadfile-btn i { align-self: center; }
.c-uploadfile-btn i,
.c-uploadfile-btn i:before { color: var(--text) !important; }
.c-uploadfile-btn[disabled] { background: #FAFAFA;}
.c-uploadfile-btn[disabled],
.c-uploadfile-btn[disabled] i,
.c-uploadfile-btn[disabled] i:before { color: #888888 !important;}
.c-uploadfile-item { border: 1px solid var(--color-line); background-color: #FFFFFF; border-radius: 6px; padding: 7px 8px; display: flex; gap: 8px; min-height: 38px; align-items: baseline; min-width: inherit; max-width: 100%; position: relative; overflow: hidden; height: auto; }
[data-filename] .c-uploadfile-item { padding-right: 0 !important; }
.c-uploadfile-item + .c-uploadfile-item { margin-top: 6px; }
.c-uploadfile-item .c-uploadfile-fileico { display: flex; z-index: 1;  align-self: center; position: relative; } 
.c-uploadfile-item .c-uploadfile-fileico:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.c-uploadfile-item .c-uploadfile-fileico i { font-size: 20px; min-width: 20px; max-width: 20px; align-self: center; color: var(--file-color); }
.c-uploadfile-item .c-uploadfile-fileico i:before { content: var(--file-type); }
[data-filename*=".mp3"] [data-mime],
[data-filename*=".mp3"],
[data-mime*="audio/"] { --file-type: var(--file-type-audio) !important; --file-color: #9563E7; }
[data-filename*=".mp4"] [data-mime],
[data-filename*=".mp4"],
[data-mime*="video/"] { --file-type: var(--file-type-video) !important; --file-color: #9563E7; }
[data-mime="embedded"] { --file-type: var(--file-type-embedded) !important; --file-color: #545555; }
[data-filename*=".png"] [data-mime],
[data-filename*=".jpg"] [data-mime],
[data-filename*=".png"],
[data-filename*=".jpg"],
[data-mime*="image/"] { --file-type: var(--file-type-img) !important; --file-color: #9563E7; }
[data-filename*=".pdf"] [data-mime],
[data-filename*=".pdf"],
[data-mime="application/pdf"] { --file-type: var(--file-type-pdf) !important; --file-color: #F06860; }
[data-filename*=".doc"] [data-mime],
[data-filename*=".docx"] [data-mime],
[data-filename*=".doc"],
[data-filename*=".docx"],
[data-mime="text/plain"],
[data-mime="application/msword"],
[data-mime*="document"] { --file-type: var(--file-type-txt) !important; --file-color: #2E7FFA; }
[data-filename*=".xls"] [data-mime],
[data-filename*=".xlsx"] [data-mime],
[data-filename*=".xls"],
[data-filename*=".xlsx"],
[data-mime*="excel"],
[data-mime*="sheet"] { --file-type: var(--file-type-xls) !important; --file-color: #53BA77; }
[data-filename*=".ppt"] [data-mime],
[data-filename*=".pptx"] [data-mime],
[data-filename*=".ppt"],
[data-filename*=".pptx"],
[data-mime*="powerpoint"],
[data-mime*="presentation"] { --file-type: var(--file-type-ppt) !important; --file-color: #ED7948; }
/* [data-mime="application/octet-stream"] i:before { --file-type: var(--file-type-1); color: ; } */
[data-filename*=".zip"] [data-mime],
[data-filename*=".rar"] [data-mime],
[data-filename*=".7z"] [data-mime],
[data-filename*=".zip"],
[data-filename*=".rar"],
[data-filename*=".7z"],
[data-mime="application/zip"],
[data-mime="application/octet-stream"],
[data-mime="application/x-7z-compressed"] { --file-type: var(--file-type-zip) !important; --file-color: #545555; }
/* [data-mime="assignment"] i:before { --file-type: var(--file-type-1); color: ; } */
/* [data-mime="resources"] i:before { --file-type: var(--file-type-1); color: ; } */
.c-uploadfile-btn-content .q-uploadfile-upload-ico { font-size: inherit; aspect-ratio: inherit; }

.c-uploadfile-item-text { font: var(--typo-body-md); white-space: nowrap; display: flex; align-items: baseline; color: var(--default); }
.c-uploadfile-item-text-filename { overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: block; color: inherit !important; }
.c-uploadfile-item-text-filesize { font: var(--typo-body-sm); color: var(--text); line-height: 16px; }
.c-uploadfile .progress { height: 3px; background: var(--color-line); margin-top: 1px; margin-right: 0; max-width: 100%; }
.c-uploadfile-item-content { flex-grow: 1; overflow: hidden; align-self: center; }
.c-uploadfile .progress-bar { background: var(--text); }
.c-uploadfile-item .btn:not(.dropdown-toggle) { padding: 0; min-height: 32px; min-width: 32px; height: 32px; align-self: center !important; margin: 0 !important; z-index: 2; }
.c-uploadfile-item .btn:not(.dropdown-toggle):hover { background: var(--secondary-hover-bg); }
.c-uploadfile-item .btn:not(.dropdown-toggle) i { font-size: 8px !important; min-width: 8px !important; }
.btn.btn-uploadfile { position: relative; }
.btn.btn-uploadfile input { position: absolute; width: 100%; height: 100%; visibility: visible; opacity: 0; cursor: pointer; }
.btn.btn-uploadfile { cursor: pointer; }
::-webkit-file-upload-button { cursor: pointer; }
.c-uploadfile .c-uploadfile-addfile { left: -12px; position: relative; margin-top: 12px !important; }
[data-mime*="image/"] .c-uploadfile-itemgroup,
[data-mime*="video/"] .c-uploadfile-itemgroup { padding-top: calc(56.25% + 2px); position: relative; overflow: hidden; }

.c-uploadfile-itemgroup[data-mime*="image/"] { padding-top: calc(56.25% + 2px); position: relative; overflow: hidden; }
.c-uploadfile[ftype="file"] .divUploadChg.q-uploadfile-action { display: none !important;  }
.c-uploadfile[ftype="file"] .c-uploadfile-group[data-mime*="image/"] .divUploadChg.q-uploadfile-action[style*="block"],
.c-uploadfile[ftype="file"] .c-uploadfile-group[data-mime*="video/"] .divUploadChg.q-uploadfile-action[style*="block"] { display: flex !important; }
.c-uploadfile[ftype="file"] .c-uploadfile-itemgroup[data-mime*="video/"]::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px;; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 60.75C49.6695 60.75 60.75 49.6695 60.75 36C60.75 22.3305 49.6695 11.25 36 11.25C22.3305 11.25 11.25 22.3305 11.25 36C11.25 49.6695 22.3305 60.75 36 60.75Z" fill="white"/><path d="M46.6692 36.9969L30.992 45.9692C30.218 46.4121 29.25 45.858 29.25 44.972V27.0277C29.25 26.1416 30.218 25.588 30.992 26.0308L46.6692 35.0032C47.4436 35.4463 47.4436 36.554 46.6692 36.9969Z" fill="%23303031"/></svg>'); background-size: cover; display: block; z-index: 1; }

[data-mime*="image/"] .c-uploadfile-itemgroup .c-uploadfile-fileico,
[data-mime*="video/"] .c-uploadfile-itemgroup .c-uploadfile-fileico { position: absolute; top: 0; left: 0; opacity: 0; }
.c-uploadfile .c-uploadfile-itemgroup img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid var(--color-line); border-radius: 8px; object-position: center; }
.c-uploadfile .c-uploadfile-group { margin-top: 0; position: relative; }
.c-uploadfile-group + .c-uploadfile-group { margin-top: 4px; }
.c-uploadfile-group:not([hasfile="1"]) + .c-uploadfile-group { margin-top: 12px; }
.c-uploadfile-removeimgfile { position: absolute; top: 4px; right: 4px; z-index: 2; background: rgba(255, 255, 255, 0.45); color: var(--secondary-txt); }
.c-uploadfile-removeimgfile:hover { background: var(--secondary-hover-bg); color: var(--secondary-txt); }
.c-uploadfile[data-type="file"] .c-uploadfile-removeimgfile { display: none;}

.c-uploadfile-item.c-uploadfile-item-has-options { padding: 7px 8px; min-height: 40px; margin-top: 0; margin-bottom: 4px; align-items: center; }
.c-uploadfile-item.c-uploadfile-item-has-options .dropdown { align-self: stretch; }
.c-uploadfile-item.c-uploadfile-item-has-options .btn.dropdown-toggle { height: 100%; width: 40px; border: 0; border-radius: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.c-uploadfile-group.c-uploadfile-group-sm { display: flex; flex-direction: column; }
.c-uploadfile-group.c-uploadfile-group-sm .c-uploadfile-btn { width: 40px; height: 40px; border-style: solid; order: 3; }
.c-uploadfile-group.c-uploadfile-group-sm .c-uploadfile-item { margin-bottom: 4px; }
.c-uploadfile-group.c-uploadfile-group-sm .c-uploadfile-item + .c-uploadfile-item { margin-top: 0; }
.c-uploadfile .c-uploadfile-itemgroup:before { padding-top: 0; }
.c-uploadfile-item.c-uploadfile-item-has-options > i { font-size: 20px; }

.c-uploadfile.disabled .c-uploadfile-btn { background: var(--form-control-disabled-bg); color: var(--disabled); }
.c-uploadfile.disabled .c-uploadfile-btn i, 
.c-uploadfile.disabled .c-uploadfile-btn i:before { color: var(--disabled) !important; }

.c-uploadfile-btn-content { display: flex; gap: 8px; justify-content: center; align-items: baseline; } 
.c-uploadfile-btn .c-uploadfile-noted { font: var(--typo-body-sm); line-height: 16px; color: var(--text); text-align: center; margin-top: 4px; }
.c-uploadfile-drop { position: absolute; }

.dataTable td .c-uploadfile-group { display: flex; flex-direction: column; }
.dataTable td .c-uploadfile-group .c-uploadfile-btn { margin-top: 0; }
.dataTable td .c-uploadfile-group .mileStoneUploadList { order: -1; }

.c-uploadfile-group .divUploadList .fileItem.HI { margin-top: 12px; }
.c-uploadfile-group .divUploadList .fileItem.HI + .fileItem.HI { margin-top: 4px; }

/* -------------------------------------------------------- */

/* UPLOAD COVER */
.c-uploadfile-cover .c-uploadfile-btn { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 56.25%; padding-bottom: 0; } 
.c-uploadfile-cover .c-uploadfile-btn-content { display: flex; gap: 8px; justify-content: center; align-items: baseline; } 
.c-uploadfile-cover .c-uploadfile-btn .c-uploadfile-noted { font: var(--typo-body-sm); line-height: 16px; color: var(--text); text-align: center; margin-top: 4px; } 
.c-uploadfile-cover .c-uploadfile-item-content-group { display: flex; gap: 8px; width: 100%; }
.c-uploadfile-cover .c-uploadfile-btn.c-uploadfile-uploading { flex-direction: row; border-style: solid; }
.c-uploadfile-cover .q-uploadfile-uploading-percent { margin-top: auto; font-weight: normal; }
.c-uploadfile-cover .progress { margin-top: 4px; }
.c-uploadfile-cover .c-uploadfile-item-content-left { flex-grow: 1; overflow: hidden; }
.c-uploadfile-cover .c-uploadfile-item-content { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 16px; }
.c-uploadfile-cover[hasfile="0"] .c-uploadfile-itemgroup { display: none; }
.c-uploadfile-cover .c-uploadfile-itemgroup:before { display: none; }
.c-uploadfile-cover [data-mime*="image/"] .c-uploadfile-itemgroup img { background: url('data:image/svg+xml,<svg width="230" height="129" viewBox="0 0 230 129" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="230" height="129" fill="%23EFF2F4"/><path d="M135.25 45.5938C136.178 45.5938 136.938 46.3672 136.938 47.3125V81.666L136.41 80.9678L122.066 62.0615C121.592 61.4277 120.843 61.0625 120.062 61.0625C119.282 61.0625 118.544 61.4277 118.059 62.0615L109.305 73.5986L106.088 69.0117C105.613 68.335 104.854 67.9375 104.031 67.9375C103.209 67.9375 102.449 68.335 101.975 69.0225L93.5371 81.0537L93.0625 81.7197V81.6875V47.3125C93.0625 46.3672 93.8219 45.5938 94.75 45.5938H135.25ZM94.75 40.4375C91.027 40.4375 88 43.5205 88 47.3125V81.6875C88 85.4795 91.027 88.5625 94.75 88.5625H135.25C138.973 88.5625 142 85.4795 142 81.6875V47.3125C142 43.5205 138.973 40.4375 135.25 40.4375H94.75ZM103.188 61.0625C103.852 61.0625 104.511 60.9291 105.125 60.67C105.739 60.4109 106.297 60.0311 106.767 59.5523C107.237 59.0735 107.61 58.505 107.865 57.8795C108.119 57.2539 108.25 56.5834 108.25 55.9062C108.25 55.2291 108.119 54.5586 107.865 53.933C107.61 53.3075 107.237 52.739 106.767 52.2602C106.297 51.7814 105.739 51.4016 105.125 51.1425C104.511 50.8834 103.852 50.75 103.188 50.75C102.523 50.75 101.864 50.8834 101.25 51.1425C100.636 51.4016 100.078 51.7814 99.6078 52.2602C99.1377 52.739 98.7648 53.3075 98.5104 53.933C98.2559 54.5586 98.125 55.2291 98.125 55.9062C98.125 56.5834 98.2559 57.2539 98.5104 57.8795C98.7648 58.505 99.1377 59.0735 99.6078 59.5523C100.078 60.0311 100.636 60.4109 101.25 60.67C101.864 60.9291 102.523 61.0625 103.188 61.0625Z" fill="%23CFD2D5"/></svg>'); }
.c-style .card-body .q-uploadfile-action .btn { margin-top: 0; background: none; }
.c-style .card-body .q-uploadfile-action .btn.c-uploadfile-removeimgfile { background: rgba(255, 255, 255, 0.45); }
.c-style .card-body .q-uploadfile-action .btn.c-uploadfile-removeimgfile:hover { background: var(--secondary-hover-bg); }

.c-uploadfile-cover-4x3 .c-uploadfile-upload-group,
.c-uploadfile-cover-4x3 .c-uploadfile-itemgroup,
.c-uploadfile-cover-4x3 { width: 134px; }
.c-uploadfile-cover-4x3 .c-uploadfile-upload-group .c-uploadfile-btn,
.c-uploadfile-cover-4x3 .c-uploadfile-btn { padding-top: 98px; padding-bottom: 0; }
.c-uploadfile-cover-4x3 .c-uploadfile-itemgroup { padding-top: 100px; padding-bottom: 0; }
.c-uploadfile-cover-4x3 .c-uploadfile-upload-group .c-uploadfile-item-content { padding: 8px; }
.c-uploadfile-cover-4x3 .c-uploadfile-upload-group .c-uploadfile-text { font: var(--typo-bold-body-md); }

/* UPLOAD AVATAR (CIRCLE) */
.c-upload-thumbnail-circle { gap: 0 30px;}
.c-upload-thumbnail-circle.q-upload-cover .q-cover-img { width: 64px; height: 64px; border-radius: 50%; border-color: var(--color-line); background: #EFF2F4; }
.c-upload-thumbnail-square.q-upload-cover .q-cover-img { border-radius: 6px; }
/* .c-upload-thumbnail-circle.q-upload-cover[hasfile="0"] .q-cover-img img,
.c-upload-thumbnail-square.q-upload-cover[hasfile="0"] .q-cover-img img { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65" fill="none"><path d="M0.0078125 0.139648H64.0078V64.1396H0.0078125V0.139648Z" fill="%23EFF2F4"/><path d="M44.0078 20.2959C44.5578 20.2959 45.0078 20.76 45.0078 21.3271V41.9393L44.6953 41.5203L36.1953 30.1766C35.9141 29.7963 35.4703 29.5771 35.0078 29.5771C34.5453 29.5771 34.1078 29.7963 33.8203 30.1766L28.6328 37.0988L26.7266 34.3467C26.4453 33.9406 25.9953 33.7021 25.5078 33.7021C25.0203 33.7021 24.5703 33.9406 24.2891 34.3531L19.2891 41.5719L19.0078 41.9715V21.3271C19.0078 20.76 19.4578 20.2959 20.0078 20.2959H44.0078ZM20.0078 17.2021C17.8016 17.2021 16.0078 19.052 16.0078 21.3271V41.9521C16.0078 44.2273 17.8016 46.0771 20.0078 46.0771H44.0078C46.2141 46.0771 48.0078 44.2273 48.0078 41.9521V21.3271C48.0078 19.052 46.2141 17.2021 44.0078 17.2021H20.0078ZM25.0078 29.5771C25.4018 29.5771 25.7919 29.4971 26.1559 29.3417C26.5198 29.1862 26.8506 28.9583 27.1291 28.671C27.4077 28.3837 27.6287 28.0427 27.7795 27.6673C27.9302 27.292 28.0078 26.8897 28.0078 26.4834C28.0078 26.0771 27.9302 25.6748 27.7795 25.2995C27.6287 24.9241 27.4077 24.5831 27.1291 24.2958C26.8506 24.0085 26.5198 23.7806 26.1559 23.6251C25.7919 23.4697 25.4018 23.3896 25.0078 23.3896C24.6138 23.3896 24.2237 23.4697 23.8598 23.6251C23.4958 23.7806 23.1651 24.0085 22.8865 24.2958C22.6079 24.5831 22.3869 24.9241 22.2362 25.2995C22.0854 25.6748 22.0078 26.0771 22.0078 26.4834C22.0078 26.8897 22.0854 27.292 22.2362 27.6673C22.3869 28.0427 22.6079 28.3837 22.8865 28.671C23.1651 28.9583 23.4958 29.1862 23.8598 29.3417C24.2237 29.4971 24.6138 29.5771 25.0078 29.5771Z" fill="%23CFD2D5"/></svg>'); } */
img[src*="default-upload.png"],
img[src*="default-image.png"] { content: url('data:image/svg+xml,<svg width="134" height="101" viewBox="0 0 134 101" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="134" height="100" transform="translate(0 0.548828)" fill="%23EFF2F4"/><path d="M0 0.548828H134V100.549H0V0.548828Z" fill="%23EFF2F4"/><path d="M87.25 31.6426C88.1781 31.6426 88.9375 32.416 88.9375 33.3613V67.7148L88.4102 67.0166L74.0664 48.1104C73.5918 47.4766 72.843 47.1113 72.0625 47.1113C71.282 47.1113 70.5437 47.4766 70.0586 48.1104L61.3047 59.6475L58.0879 55.0605C57.6133 54.3838 56.8539 53.9863 56.0312 53.9863C55.2086 53.9863 54.4492 54.3838 53.9746 55.0713L45.5371 67.1025L45.0625 67.7686V33.3613C45.0625 32.416 45.8219 31.6426 46.75 31.6426H87.25ZM46.75 26.4863C43.027 26.4863 40 29.5693 40 33.3613V67.7363C40 71.5283 43.027 74.6113 46.75 74.6113H87.25C90.973 74.6113 94 71.5283 94 67.7363V33.3613C94 29.5693 90.973 26.4863 87.25 26.4863H46.75ZM55.1875 47.1113C55.8523 47.1113 56.5106 46.978 57.1248 46.7188C57.739 46.4597 58.2971 46.0799 58.7672 45.6011C59.2373 45.1223 59.6102 44.5539 59.8646 43.9283C60.1191 43.3027 60.25 42.6322 60.25 41.9551C60.25 41.2779 60.1191 40.6075 59.8646 39.9819C59.6102 39.3563 59.2373 38.7879 58.7672 38.3091C58.2971 37.8303 57.739 37.4504 57.1248 37.1913C56.5106 36.9322 55.8523 36.7988 55.1875 36.7988C54.5227 36.7988 53.8644 36.9322 53.2502 37.1913C52.636 37.4504 52.0779 37.8303 51.6078 38.3091C51.1377 38.7879 50.7648 39.3563 50.5104 39.9819C50.2559 40.6075 50.125 41.2779 50.125 41.9551C50.125 42.6322 50.2559 43.3027 50.5104 43.9283C50.7648 44.5539 51.1377 45.1223 51.6078 45.6011C52.0779 46.0799 52.636 46.4597 53.2502 46.7188C53.8644 46.978 54.5227 47.1113 55.1875 47.1113Z" fill="%23CFD2D5"/></svg>')}
.c-upload-thumbnail-circle .q-uploadfile-upload-ico { font-size: 14px;}
.c-upload-thumbnail-circle .c-uploadfile-btn { margin-top: 0; max-width: 300px; min-width: auto; width: 100%; }
.c-upload-thumbnail-circle .q-uploadfile-upload-group { margin-bottom: 8px; height: auto; }
.c-upload-thumbnail-circle .q-uploadfile-uploading-container { flex-direction: column; gap: 4px; align-items: flex-start; max-width: 226px; }
.c-upload-thumbnail-circle .c-uploadfile-item-content-group { display: flex; align-items: baseline; gap: 4px; }
.c-upload-thumbnail-circle .progress { margin: 0; }
.c-upload-thumbnail-circle .c-upload-btn-remove { left: -12px; height: 28px; position: relative; text-decoration: underline; font: var(--typo-body-md); }
.c-upload-thumbnail-circle .c-uploadfile-noted { margin-top: 8px; font: var(--typo-body-md); color: var(--text); }
.c-upload-thumbnail-circle .c-uploadfile-uploading-percent { font: var(--typo-body-md); }
.c-upload-thumbnail-circle .c-uploadfile-action { display: flex; }
.c-upload-thumbnail-circle .q-uploadfile-action { margin-left: 0; }

/* FORM - Datepicker */
.c-datepicker-range,
.c-group-column-space { display: flex; gap: calc(2 * var(--coumn-gap)); }
.c-modal .c-datepicker-range,
.c-modal .c-group-column-space {  --coumn-gap: 6px; }
.c-style .input-group.q-input-group-datepicker,
.c-style .input-group.q-input-group-timepicker { max-width: 100%; }
.c-style .q-input-group-datepicker .form-control,
.c-style .q-input-group-timepicker .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 0 !important; }
.c-style .q-input-group-datepicker .input-group-append,
.c-style .q-input-group-timepicker .input-group-append { z-index: 3; }
.c-style .input-group-append .input-group-text,
.c-style .input-group-append .btn { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.c-style .q-input-group-datepicker .input-group-append .input-group-text,
.c-style .q-input-group-timepicker .input-group-append .input-group-text { background: var(--form-control-bg); min-width: 40px; justify-content: center; padding: 0; transition: none !important; }
.c-style .input-group.q-input-group-datepicker.col-4,
.c-style .input-group.q-input-group-timepicker.col-4 { max-width: 33.333333%; flex: 0 0 33.333333%; }
.form-group.col-6 .input-group.q-input-group-datepicker,
.c-style .input-group.q-input-group-datepicker:not([class*=col-]),
.form-group.col-6 .input-group.q-input-group-timepicker,
.c-style .input-group.q-input-group-timepicker:not([class*=col-]) { max-width: 100%;  }
.c-style .input-group.q-input-group-datepicker .form-control:hover + .input-group-append .input-group-text,
.c-style .input-group.q-input-group-timepicker .form-control:hover + .input-group-append .input-group-text { background: var(--form-control-hover-bg); border-color: var(--form-control-hover-border); }
.c-style .input-group.q-input-group-datepicker .form-control:focus ~ .input-group-append .input-group-text,
.c-style .input-group.q-input-group-timepicker .form-control:focus ~ .input-group-append .input-group-text { border-color: var(--form-control-focus-border); background: var(--form-control-bg); box-shadow: var(--form-control-focus-append-shadow); }

.c-style .bootstrap-datetimepicker-widget { box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); padding: 0; max-width: fit-content !important; min-width: 256px !important; max-height: fit-content !important; width: fit-content !important; min-height: 246px; }
.c-style .bootstrap-datetimepicker-widget a[data-action] { display: none; }
.c-style .bootstrap-datetimepicker-widget .datepicker table { border-collapse: separate; border-spacing: 6px; padding: 6px; }
.c-style .bootstrap-datetimepicker-widget table td.day { border: 0; height: 28px; width: 28px; border-radius: 8px; max-width: 28px; min-width: 28px; padding: 0; text-shadow: none; color: var(--default); }
.c-style .bootstrap-datetimepicker-widget table td.day::after { background: var(--primary) !important; transform: none !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; opacity: 0; border: 0 !important; border-radius: 0 !important; }
.c-style .bootstrap-datetimepicker-widget table td.day.today:hover::after,
.c-style .bootstrap-datetimepicker-widget table td.day:hover::after { opacity: 1; background: #EFF2F4 !important; border-radius: 8px !important; }
.c-style .bootstrap-datetimepicker-widget table td.day.today:hover::after { border-radius: 0 !important; }
.c-style .bootstrap-datetimepicker-widget table td.day.today { border: 2px solid var(--primary); }
.c-style .bootstrap-datetimepicker-widget table td.day.today::after { opacity: 0; }
.c-style .bootstrap-datetimepicker-widget table td.day.old.active,
.c-style .bootstrap-datetimepicker-widget table td.day.active { color: var(--default); }
.c-style .bootstrap-datetimepicker-widget table td.day.active::after { opacity: 0.2; background: var(--primary) !important; border-radius: 8px !important;  }
.c-style .bootstrap-datetimepicker-widget table td.day.today.active::after { border-radius: 0px !important;  }
.c-style .bootstrap-datetimepicker-widget table td.day.old { color: var(--light); }
.c-style .bootstrap-datetimepicker-widget table thead tr:first-child { display: table-row; position: relative; }
.c-style .bootstrap-datetimepicker-widget table th.dow { padding: 0; width: auto; height: auto; color: var(--text); }

.c-style .bootstrap-datetimepicker-widget table th.picker-switch { height: 32px; font: var(--typo-bold-body-lg); border-radius: 6px; }
.c-style .bootstrap-datetimepicker-widget table th.picker-switch:hover,
.c-style .bootstrap-datetimepicker-widget .prev:hover,
.c-style .bootstrap-datetimepicker-widget .next:hover { border-radius: 6px; background: #EFF2F4 !important; color: var(--default); }
.c-style .bootstrap-datetimepicker-widget span.glyphicon { font-size: 12px; color: var(--default); font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin: 0 !important; padding: 0 !important; }
.c-style .bootstrap-datetimepicker-widget span.glyphicon::after { background-image: none !important; }
.c-style .bootstrap-datetimepicker-widget .prev[data-action="previous"] span.glyphicon::after { content: '\e914'; font-size: inherit; }
.c-style .bootstrap-datetimepicker-widget .next[data-action="next"] span.glyphicon::after { content: '\e913'; font-size: inherit; }
.c-style .bootstrap-datetimepicker-widget .prev,
.c-style .bootstrap-datetimepicker-widget .next { min-width: 32px; width: 32px; text-align: center; }

.c-style .bootstrap-datetimepicker-widget .datepicker-months table td, 
.c-style .bootstrap-datetimepicker-widget .datepicker-years table td, 
.c-style .bootstrap-datetimepicker-widget .datepicker-decades table td { padding: 0; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months tbody,
.c-style .bootstrap-datetimepicker-widget .datepicker-years tbody,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades tbody { display: block; position: absolute; width: calc(100% - 32px); height: fit-content; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months tr,
.c-style .bootstrap-datetimepicker-widget .datepicker-years tr,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades tr { display: block; width: 100%; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months td,
.c-style .bootstrap-datetimepicker-widget .datepicker-years td,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades td { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 8px; grid-row-gap: 12px; height: fit-content; width: 100%; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months table td span.month,
.c-style .bootstrap-datetimepicker-widget .datepicker-years table td span.year,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades table td span.decade { width: 100%; min-height: 32px; height: auto; margin: 0; position: relative; overflow: hidden; background: transparent; font: var(--typo-body-lg); display: flex; justify-content: center; align-items: center; text-shadow: none; color: var(--default); padding: 6px 12px; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months table td span.month::before,
.c-style .bootstrap-datetimepicker-widget .datepicker-years table td span.year::before,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades table td span.decade::before { content: ''; top: 0; left: 0; position: absolute; width: 100%; height: 100%; border-radius: 6px; z-index: -1; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months table td span.month:hover::before,
.c-style .bootstrap-datetimepicker-widget .datepicker-years table td span.year:hover::before,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades table td span.decade:hover::before { background: #EFF2F4; }
.c-style .bootstrap-datetimepicker-widget .datepicker-months table td span.month.active::before,
.c-style .bootstrap-datetimepicker-widget .datepicker-years table td span.year.active::before,
.c-style .bootstrap-datetimepicker-widget .datepicker-decades table td span.decade.active::before  { background: var(--primary); opacity: 0.2; }
.c-style .bootstrap-datetimepicker-widget table td span:empty { display: none; }
.c-style .bootstrap-datetimepicker-widget table th,
.c-style .bootstrap-datetimepicker-widget table td { box-sizing: border-box; text-align: center; }

/* -------------------------------------------------------- */

/* FORM - Select2 */
.c-style .q-form-content .select2-container { max-width: 100%; }
.c-style .select2-container--default .select2-selection--single { border-radius: 8px !important; padding-left: 12px !important; padding-right: 0; gap: 12px; outline: 0 !important; }
.c-style .select2-container--default .select2-selection--single:hover { border-color: var(--form-control-hover-border); }
.c-style .select2-container--default .select2-selection--single .select2-selection__arrow { display: flex; justify-content: center; align-items: center; width: 40px !important; min-width: 40px !important; font-size: 12px !important; }
.c-style .select2-container--default .select2-selection--single .select2-selection__arrow::before { content: '\e915'; font-size: 12px; color: #545555; height: 12px; width: 12px; display: flex; justify-content: center; align-items: center; font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.c-style .select2-container--default .select2-selection--single[aria-expanded="true"] .select2-selection__arrow::before { content: '\e912'; }
.c-style .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.c-style .select2-container .select2-dropdown,
.select2-container .select2-dropdown { border-radius: 8px; box-shadow: 0px 3px 10px 0px #00000014; overflow: auto; }
.select2-container .select2-dropdown .select2-results { padding: 0; margin: 0; }
.c-style .select2-container .select2-results { padding: 0; margin: 0; }
.c-style .select2-container--default .select2-results__option.select2-results__option--highlighted:not(.select2-results__option--selected) { background: var(--dropdown-option-hover-bg); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--dropdown-option-hover-bg); }
.c-style .select2-container--default .select2-results__option--highlighted.select2-results__option--selected,
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--selected.select2-results__option--selectable { background: var(--dropdown-option-focus-bg); font-weight: bold; }
.c-style .select2-container--default .select2-selection--single[aria-expanded="true"] { border-color: var(--form-control-focus-border); background: var(--form-control-bg); box-shadow: var(--form-control-focus-shadow); }
.c-style .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--form-control-placeholder); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.select2-container .select2-dropdown.select2-dropdown--above { top: -4px; }
.select2-container .select2-dropdown.select2-dropdown--below { top: 4px; }
.c-style .select2-container--default .select2-selection--single:hover:not(:focus) { --form-control-bg: var(--form-control-hover-bg); }
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--form-control-border); background: var(--form-control-bg); color: var(--form-control-txt); font: var(--form-control-font); padding: var(--form-control-padding); height: var(--form-control-height); border-radius: 8px; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar { width: 10px; height: 10px; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track { background-color: transparent; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb { background-color: #CBCECF; border: 2px solid rgba(0, 0, 0, 0); border-radius: 100px; background-clip: padding-box; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover { background-color: #A7A9AB; }
.select2-container--default .select2-search--dropdown + .select2-results > .select2-results__options { max-height: calc(180px); }
.select2-container--default .select2-selection--single .select2-selection__rendered .c-myannounce-select-item .text { margin: 0; }
/* .select2-container--default .select2-search--dropdown:not(.select2-search--hide) + .select2-results > .select2-results__options { max-height: calc(180px); } */
body[bigure-link="inbox"] .select2-container--default .select2-search--dropdown + .select2-results > .select2-results__options { max-height: calc(300px - 56px); }
.select2-container--default .select2-results > .select2-results__options { max-height: 180px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:empty { display: none; }
.c-style .select2-container--default .select2-selection--single[aria-disabled="true"]:hover { border-color: var(--form-control-disabled-border);}

.c-style .form-group .text { line-height: 18px; display: flex; align-items: center; gap: 6px; font: var(--typo-body-md); margin-top: 0; }
.c-style .form-group .text  i { font-size: 12px; display: flex; }
.c-style .form-group .text:empty { display: none; }

/* FORM - Checkbox */
.q-style .custom-control.custom-checkbox,
.q-style .custom-control.custom-radio { flex-wrap: nowrap; } 

.form-group-checkbox .col-form-label { padding-top: 10px; }
.c-checkbox-group,
.c-radio-group { display: flex; flex-direction: column; gap: 8px calc(2 * var(--coumn-gap)); line-height: 1px; }
.c-style .custom-control.custom-checkbox,
.c-style .custom-control.custom-radio { line-height: 20px; min-height: 24px; }
.c-style .custom-control-input ~ .custom-control-label::before { line-height: 18px; font-size: 18px; top: 3px; position: relative; /*left: 0;*/ left: 1px; }
.c-style .custom-control.custom-checkbox .custom-control-label, 
.c-style .custom-control.custom-radio .custom-control-label { align-items: baseline; gap: 12px; }

.c-checkbox-label { font: var(--typo-body-lg); }
.c-checkbox-label .c-checkbox-title { font: var(--typo-body-lg); } 
.c-checkbox-label .c-checkbox-txt { font: var(--typo-body-md); color: var(--text); margin-top: 2px; } 

.c-style .custom-control.custom-radio .form-group { width: 100%; padding-left: 30px; }

.c-style .custom-control-input[type="radio"] ~ .custom-control-label::before,
.c-style .custom-control-input[type="checkbox"] ~ .custom-control-label::before { color: var(--form-control-border); background: #FFFFFF; }
.c-style .custom-control-input[type="radio"]:checked ~ .custom-control-label::before,
.c-style .custom-control-input[type="checkbox"]:checked ~ .custom-control-label::before { color: var(--primary); }
.c-style .custom-control-label::before { font-family: 'pms-ico' !important; }
.c-style .custom-control-input[type="radio"]:checked ~ .custom-control-label::before { content: '\e906'; }
.c-style .custom-control-input[type="radio"] ~ .custom-control-label::before { content: '\e907'; }
.c-style .custom-control-input[type="radio"]:not(:checked)[disabled] ~ .custom-control-label::before { content: '\e907' !important; opacity: 1; background: #FAFAFA; border-radius: 50%; } 
.c-style .custom-control-input[type="checkbox"]:checked ~ .custom-control-label::before { content: '\e904'; }
.c-style .custom-control-input[type="checkbox"] ~ .custom-control-label::before { content: '\e905'; }
.c-style .custom-control-input[type="radio"]:checked:disabled ~ .custom-control-label::before,
.c-style .custom-control-input[type="radio"]:checked[disabled] ~ .custom-control-label::before,
.c-style .custom-control-input[type="checkbox"]:checked:disabled ~ .custom-control-label::before,
.c-style .custom-control-input[type="checkbox"]:checked[disabled] ~ .custom-control-label::before { opacity: 0.5;}
.c-style .custom-control.custom-checkbox [type="checkbox"].custom-control-input:not(:checked)[disabled] ~ .custom-control-label::before,
.c-style .custom-control-input[type="checkbox"]:not(:checked)[disabled] ~ .custom-control-label::before{ content: '\e905'; opacity: 1; background: #FAFAFA; }

.c-style .custom-control-input:disabled~.custom-control-label, 
.c-style .custom-control-input[disabled]~.custom-control-label { color: var(--default); }

/* DROPDOWN */
.c-style .dropdown-menu { max-width: 200px; background: #FFFFFF; width: 100%; border-radius: 8px; margin: 4px 0; border: 1px solid var(--form-control-border); box-shadow: 0px 3px 10px 0px #00000014; min-width: 200px; max-height: 182px; }
.c-style .dropdown-menu .dropdown-item,
.c-style.dropdown-menu .dropdown-item { white-space: normal; cursor: pointer; padding: var(--dropdown-option-spacing); }
.c-style .dropdown-menu .dropdown-item:has(> .dropdown-item) { padding: 0;} 
.c-style .dropdown-menu .dropdown-item:before { display: none; }
.c-style .dropdown-menu .dropdown-item[class*="lbl_"]:before { display: block; margin: 0;}
.c-style .dropdown-menu .dropdown-title,
.c-style.dropdown-menu .dropdown-title { font: var(--typo-body-lg); color: var(--default); }
.c-style .dropdown-menu .dropdown-text,
.c-style.dropdown-menu .dropdown-text { font: var(--typo-body-md); color: var(--text); margin-top: 2px; }
.c-style .dropdown-menu.dropdown-menu-fitcontent,
.c-style.dropdown-menu.dropdown-menu-fitcontent { min-width: 100px; max-width: fit-content; }
.c-style .input-group .dropdown-menu .dropdown-item strong { font-weight: inherit; }
.c-style .dropup .dropdown-menu { top: auto !important; }
.c-style.dropdown-menu.c-style { /*margin-top: 44px;*/ } /*kpi option zoomout notwork*/
.c-style .lookupSearch .dropdown-menu a.dropdown-item { gap: inherit;}
.c-style .lookupSearch .dropdown-menu a.dropdown-item strong { font-weight: bold;}

/* dropdown-menu-sub */
.c-style .dropdown-menu.dropdown-menu-sub .dropdown-title { font-size: 12px; line-height: 18px; font-weight: bold; color: #888888; padding: 0 12px; }
.c-style .dropdown-menu.dropdown-menu-sub .dropdown-item { display: flex; padding: 8px 12px 8px 4px; gap: 2px; align-items: center; }
.c-style .dropdown-menu.dropdown-menu-sub hr { border-color: #EFF2F4; margin: 12px 12px 16px; }
.c-style .dropdown-menu.dropdown-menu-sub { max-height: 310px; padding: 8px 0; max-width: 218px; min-width: 218px; }
.c-style .dropdown-menu.dropdown-menu-sub .dropdown-item:before { content: ''; display: block; width: 18px; height: 18px; }
.c-style .dropdown-menu.dropdown-menu-sub .dropdown-item.active:before {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none"><path d="M12.7896 6.47461C12.936 6.32826 13.1576 6.31233 13.318 6.41895L13.3824 6.47266C13.5512 6.64335 13.546 6.91023 13.3873 7.06738L12.9586 7.49219L12.9644 7.49805L7.93808 12.5254C7.79162 12.6719 7.56914 12.6879 7.40878 12.5811L7.34433 12.5273L4.61679 9.7998C4.47046 9.65348 4.45455 9.43181 4.56113 9.27148L4.61484 9.20703C4.76419 9.05934 4.98732 9.04437 5.14609 9.14941L5.20956 9.20215L7.63828 11.6309L8.0621 11.2061L12.7896 6.47461Z" stroke="%23386BF6" stroke-width="1.2"/></svg>'); }


.c-style .input-group .dropdown-menu .HA { border-color: var(--color-line); }
.c-input-group-lookup .typeahead.dropdown-menu .btnShowMore .spinner-border { width: 16px; height: 16px; border-width: 2px; }
.c-input-group-lookup .c-input-group-selectedicon[data-gapscore]:not([data-gapscore=""]) ~ .form-control { padding-left: 32px; }
.c-input-group-lookup .c-input-group-selectedicon[data-gapscore],
.c-input-group-selectedicon[data-gapscore] { position: absolute; --gapscore: var(--success); width: 8px; height: 8px; border-radius: 2px; background-color: var(--gapscore); align-self: flex-start; z-index: 1; left: 12px; top: 17px; }
.c-input-group-lookup .c-input-group-selectedicon[data-gapscore*="-"],
.c-input-group-selectedicon[data-gapscore*="-"] { --gapscore: var(--danger); }
.c-input-group-lookup .c-input-group-selectedicon[data-gapscore="0"],
.c-input-group-selectedicon[data-gapscore="0"] { --gapscore: #0E66EB; }
.c-input-group-selectedicon[data-gapscore] { position: relative; display: inline-block; margin-right: 8px; top: inherit; left: inherit; }

.c-dropdown-item-icon:not([data-gapscore]) { display: none; }
.c-dropdown-item-icon[data-gapscore] { --gapscore: var(--success); width: 8px; height: 8px; border-radius: 2px; background-color: var(--gapscore); align-self: flex-start; margin-top: 8px; }
.c-dropdown-item-icon[data-gapscore*="-"] { --gapscore: var(--danger); }
.c-dropdown-item-icon[data-gapscore="0"] { --gapscore: #0E66EB; }
.c-dropdown-item-text { color: var(--grey); margin-top: 2px; font: var(--typo-body-md); }
.c-dropdown-item-text:empty { display: none; }
.c-dropdown-item-content { overflow: hidden; }

.input-group .dropdown-menu .dropdown-item .q-lookupdropdown-label { white-space: normal; }
.c-lookup-nodata { padding: var(--lookup-option-padding); font: var(--dropdown-option-font); color: #888888;}

/* CUSTOM DROPDOWN */
.c-style.dropdown-menu { background: #FFFFFF; border-radius: 8px; border: 1px solid var(--form-control-border); box-shadow: 0px 3px 8px 0px #00000014; padding: 0; overflow: auto; overflow-x: hidden; margin: 4px 0; }
.c-style.dropdown-menu .dropdown-item { font: var(--dropdown-option-font); padding: var(--dropdown-option-spacing); color: var(--dropdown-option-color); }
.c-style.dropdown-menu .dropdown-item.active { background: var(--dropdown-option-focus-bg); font-weight: bold; }
.c-style.dropdown-menu .dropdown-item:hover { background: var(--dropdown-option-hover-bg); }
.c-style.dropdown-menu.dropdown-menu-otions { min-width: 120px; }

/* INPUTGROUP */
.c-form-inputgroup-container { margin-top: 16px; }
.c-form-inputgroup { display: flex; gap: 8px; }
.c-form-inputgroup + .c-form-inputgroup { margin-top: 12px; }
.c-form-inputgroup-inline { display: flex; gap: calc(2 * var(--coumn-gap)); }
.c-form-inputgroup .c-form-inputgroup-inline + .btn { margin: 0; align-self: center; }
.c-form-inputgroup .c-form-inputgroup-inline + .btn i { font-size: 10px; min-width: 16px; height: 16px; width: 16px; display: flex; justify-content: center; align-items: center; }
.c-form-inputgroup-container > .btn { margin-top: 6px; height: var(--btn-xl-height); left: -12px; position: relative; }
.c-input-group-lookup .input-group-append .btn i { font-size: 12px; min-width: 12px; height: 12px; }
.c-style .input-group-append .input-group-text i { color: var(--text); font-size: 12px; }
.c-style .input-group .dropdown-menu:not(.bootstrap-datetimepicker-widget) { max-height: 180px; }

/* INPUTGROUP SEARCH */
.c-input-group-search .input-group-prepend { order: -1; }
.c-input-group-search .input-group-prepend .btn { border-radius: 8px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0; background: #FFFFFF; cursor: default; }
.c-input-group-search .input-group-append .btn { border-radius: 8px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0; background: #FFFFFF; cursor: pointer; }
.c-input-group-search .input-group-prepend .btn i,
.c-input-group-search .input-group-append .btn i { font-size: 14px; min-width: 14px; height: 14px; }
.c-input-group-search .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0 !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; border-right: 1px solid var(--form-control-border) !important; padding-left: 0 !important; }
.c-input-group-search:hover .form-control { background: var(--form-control-hover-bg); }
.c-input-group-search .form-control:focus { border-color: var(--form-control-focus-border) !important; box-shadow: 5px 3px 8px 0px #00000014; background: var(--form-control-bg); }
.c-input-group-search:hover .input-group-prepend .btn,
.c-input-group-search:hover .form-control,
.c-input-group-search .form-control:hover + .input-group-prepend .btn,
.c-input-group-search .form-control:hover ~ .input-group-append .btn,
.c-input-group-search .input-group-append .btn:hover { background: var(--form-control-hover-bg); border-color: var(--form-control-hover-border) !important;  } 
.c-input-group-search .form-control:focus + .input-group-prepend .btn,
.c-input-group-search .form-control:focus ~ .input-group-append .btn { border-color: var(--form-control-focus-border) !important; box-shadow: var(--form-control-focus-prepend-shadow); background: var(--form-control-bg); }
.c-input-group-search .form-control:hover { border-color: var(--form-control-hover-border) !important; }
.c-input-group-search .form-control:focus { border-color: var(--form-control-focus-border) !important; }
.c-input-group-search .input-group-append .btn:focus, 
.c-input-group-search .input-group-append .btn:active, 
.c-input-group-search .input-group-prepend .btn:focus, 
.c-input-group-search .input-group-prepend .btn:active { background: var(--form-control-bg) !important;}

/* TEXTEDIT */
.c-style .tox-tinymce { border: 1px solid var(--form-control-border); background: var(--form-control-bg); color: var(--form-control-txt); font: var(--form-control-font); border-radius: 8px; }
.c-style .tox-tinymce:hover { border-color: var(--form-control-hover-border); }
.c-style .tox-tinymce:focus-within:hover { --form-control-border: var(--form-control-focus-border); }
.c-style .tox .tox-toolbar__primary { border-bottom: 1px solid #E3E6E8; background: #FAFAFA; padding: 4px 8px; }
.c-style .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) { border-color: #E3E6E8; padding-left: 0; padding-right: 8px; }
.c-style .tox:not([dir=rtl]) .tox-toolbar__group + .tox-toolbar__group { padding-left: 8px; }
.c-style .tox .tox-toolbar__group .tox-tbtn { border-radius: 6px; width: 32px; height: 32px; margin: 0; position: relative; }
.c-style .tox .tox-toolbar__group .tox-tbtn:hover { background: #EFF2F4; }
.c-style .tox .tox-toolbar__group .tox-tbtn.tox-tbtn--enabled { background: #E3E6E8; }
.c-style .tox .tox-toolbar__group .tox-tbtn.tox-tbtn--select { width: 80px; }
.c-style .tox .tox-tbtn__select-chevron { width: 32px; } /* todo */
.c-style .tox .tox-toolbar__group:nth-child(1) .tox-split-button .tox-tbtn:nth-child(1) { width: 26px; padding-left: 10px; padding-right: 4px; }
.tox .tox-toolbar { border-bottom: 1px solid #E3E6E8; background: #FAFAFA !important; padding: 6px 8px !important; }

.c-style .tox .tox-toolbar__group:nth-child(1) > .tox-split-button:nth-child(7),
.c-style .tox .tox-toolbar__group .tox-tbtn.tox-tbtn--select---- { margin-right: 17px; overflow: unset; position: relative; }
.c-style .tox .tox-toolbar__group:nth-child(1) > .tox-split-button:nth-child(7)::after,
.c-style .tox .tox-toolbar__group .tox-tbtn.tox-tbtn--select----::after { content: ''; border-right: 1px solid #E3E6E8; height: 100%; position: absolute; right: -9px; }
.c-style .tox .tox-toolbar__group:nth-child(1) > .tox-split-button:nth-child(6) { margin-left: 17px; overflow: unset; position: relative; }
.c-style .tox .tox-toolbar__group:nth-child(1) > .tox-split-button:nth-child(6)::after { content: ''; border-right: 1px solid #E3E6E8; height: 100%; position: absolute; left: -9px; }
.c-style .tox .tox-split-button:hover { border: 0; box-shadow: none; }
.c-style .tox .tox-split-button:focus { background: transparent; }
.c-style .tox .tox-split-button .tox-tbtn { background: transparent !important; }
.c-style .tox .tox-split-button .tox-tbtn.tox-split-button__chevron:hover { background: #EFF2F4 !important; cursor: pointer; }

.c-style .tox-tbtn .tox-icon svg { fill: var(--text); }

.tox .tox-menu.tox-collection.tox-collection--list { border: 1px solid var(--dropdown-border); background: var(--dropdown-bg); border-radius: 8px; padding: var(--dropdown-spacing); word-break: break-all; max-height: 200px; overflow-y: auto; box-shadow: 0px 3px 10px 0px #00000014; margin: 4px 0; }
.tox .tox-collection--list .tox-collection__group { padding: 0 !important; border: 0; }
.tox .tox-collection--list .tox-collection__item { gap: 12px; color: var(--dropdown-option-color); padding: var(--dropdown-option-spacing) !important; }
.tox .tox-collection--list .tox-collection__item--active { background-color: var(--dropdown-option-hover-bg) !important; }
.tox .tox-collection--list .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) { background-color: var(--primary); font-weight: bold; color: var(--dropdown-option-color) !important; background: var(--dropdown-option-focus-bg); }
.tox .tox-collection--list .tox-collection__item-label { font: var(--dropdown-option-font); margin: 0 !important; font-weight: inherit; }
.tox .tox-collection--list .tox-collection__item-checkmark { display: none; }

.tox .tox-menu.tox-swatches-menu { border: 1px solid var(--dropdown-border); border: 0; background: var(--dropdown-bg); border-radius: 8px; padding: var(--dropdown-spacing); word-break: break-all; max-height: 200px; overflow-y: auto; box-shadow: 0px 3px 10px 0px #00000014; margin: 4px 0; }
.tox .tox-menu.tox-swatches-menu .tox-swatches { padding: 6px; }
.tox .tox-swatches__row { gap: 2px; }
.tox .tox-swatches__row + .tox-swatches__row { margin-top: 2px; }
.tox .tox-swatches__row .tox-swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #EFF2F4; position: relative; overflow: hidden; cursor: pointer; }
.tox .tox-swatches__row .tox-swatch:focus, 
.tox .tox-swatches__row .tox-swatch:hover {  box-shadow: none; transform: none; border-color: #545555; }
.tox .tox-dialog__header .tox-button { width: 32px; height: 32px; color: #545555 !important; opacity: 1; border: 0 !important; right: -8px; top: -8px; position: relative; border-radius: 6px; display: flex; justify-content: center; align-items: center; }
.tox .tox-dialog__header .tox-button:hover:not(:disabled) { background: #EFF2F4; }
.tox .tox-dialog__header .tox-button svg { width: 12px; height: 12px; }
.tox .tox-swatches__row .tox-swatch.tox-swatches__picker-btn { border: 0; }
.tox .tox-swatches__row .tox-swatch.tox-swatches__picker-btn svg { width: 14px; height: 14px; }
.mce-content-body { font-size: 1rem; padding: var(--form-control-padding); margin: 0; color: #131313; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.429;  }
.mce-content-body p { margin: 0; }
.mce-content-body * { line-height: 1.429 !important; letter-spacing: 0.2px !important; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; }
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { padding: var(--form-control-padding); color: var(--form-control-placeholder); top: 0; left: 0; }

.tox .tox-dialog-wrap { padding: 16px; }
.tox .tox-dialog-wrap .tox-dialog-wrap__backdrop { background: rgb(0 0 0 / 50%); -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 0.15s; animation-duration: 0.15; -webkit-animation-fill-mode: both; animation-fill-mode: both;  }
.tox .tox-dialog-wrap .tox-dialog { border-radius: 12px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); border: 0; width: 100%; max-width: 500px; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 0.3s; animation-duration: 0.3; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.tox .tox-dialog-wrap .tox-dialog__header { border: 0; padding: 20px 24px 0; }
.tox .tox-dialog-wrap .tox-dialog__header .tox-dialog__title { font: var(--typo-page-subtitle); }
.tox .tox-dialog-wrap .tox-dialog__footer { border: 0; padding: 12px 20px 20px 20px; gap: 16px; }
.tox .tox-dialog-wrap .tox-dialog__body-content { padding: 20px; padding-top: 16px; overflow-y: auto; }
.tox .tox-dialog__footer .tox-button { margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; height: var(--btn-md-height); padding: var(--btn-md-padding); font: var(--btn-md-font); white-space: nowrap; min-width: var(--btn-md-minwidth); transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; border-radius: 6px; gap: 6px;  }
.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary) { --primary: var(--color-qcolor8, var(--color-qcolor3)); border: 0; background-color: var(--primary); color: #FFFFFF; }
.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary):hover { background: linear-gradient(to top, rgba(0, 0, 0, 30%), rgba(0, 0, 0, 30%)) var(--primary) !important; }
.tox .tox-dialog__footer .tox-button.tox-button--secondary { --primary: var(--color-qcolor8, var(--color-qcolor3)); border: 1px solid var(--primary); color: var(--primary); background-color: #FFFFFF; }
.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover { background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary); color: var(--primary); border-color: var(--primary); }
.tox .tox-dialog__footer .tox-dialog__footer-end { display: flex; gap: 16px; }
.tox .tox-dialog-wrap .tox-form__group { margin: 0; }
.tox .tox-dialog-wrap .tox-form__group + .tox-form__group { margin-top: 16px; }
.tox .tox-dialog-wrap .tox-label, 
.tox .tox-dialog-wrap .tox-toolbar-label { font: var(--form-label); margin-bottom: 4px; padding-top: 0; padding-bottom: 0; color: var(--default); }
.tox .tox-dialog-wrap .tox-textfield { border-color: var(--form-control-border); background: var(--form-control-bg); color: var(--form-control-txt); font: var(--form-control-font); padding: var(--form-control-padding); height: var(--form-control-height); border-radius: 8px;  line-height: var(--form-control-height); }
.tox .tox-dialog-wrap .tox-textfield:hover { border-color: var(--form-control-hover-border); background: var(--form-control-hover-bg); }
.tox .tox-dialog-wrap .tox-textfield:focus { box-shadow: var(--form-control-focus-shadow); background: var(--form-control-bg); border-color: var(--form-control-focus-border); }
.tox .tox-dialog__header .tox-button[title="Close"] { display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; height: var(--btn-md-height); font: var(--btn-md-font); white-space: nowrap; transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; text-decoration: none; min-width: var(--btn-md-height); padding: 0; border-radius: 6px; gap: 6px;  color: #545555 !important; opacity: 1; border: 0 !important; right: -8px; top: -8px; position: relative; font-size: 12px; }
.tox .tox-dialog__header .tox-button[title="Close"]:hover { background: #EFF2F4; }
.tox .tox-dialog__header .tox-button[title="Close"] .tox-icon { display: flex; }
.tox .tox-dialog__header .tox-button[title="Close"] .tox-icon::before { content: "\e920"; font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.tox .tox-dialog__header .tox-button[title="Close"] .tox-icon svg { display: none; }
.c-style .tox .tox-toolbar__group { gap: 8px 2px; height: 100%; }
.c-style .tox .tox-toolbar--scrolling .tox-toolbar__group { flex-wrap: wrap; width: 100%; }

@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-50px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-50px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.tox .tox-dialog__body-content .tox-rgb-form { flex-grow: 1; }
.tox .tox-dialog__body-content .tox-rgb-form label { margin-right: 16px !important; min-width: 20px; font: var(--typo-body-lg); }
.tox .tox-dialog__body-content .tox-rgb-form input { flex-grow: 1; }
.tox .tox-dialog__body-content .tox-rgb-form div { margin-bottom: 8px; }
.tox .tox-dialog__body-content .tox-rgb-form .tox-rgba-preview { margin-bottom: 0; height: 32px; border-radius: 8px; border: 1px solid var(--form-control-border); }
.tox .tox-dialog__body-content .tox-hue-slider-spectrum { border-radius: 6px; }
.tox .tox-dialog__body-content .tox-sv-palette-spectrum { border-radius: 8px; }
.tox .tox-dialog__body-content .tox-hue-slider-thumb { background-color: #FFF; height: 8px; border-radius: 4px; border-color: #545555; }
.tox .tox-dialog__body-content .tox-sv-palette-thumb { outline: 1px solid #545555; border: 3px solid #FFF; height: 8px; width: 8px; } 
.tox .tox-dialog__body-content .tox-sv-palette-inner-thumb { display: none; }

/* FORM */
.c-style .col-form-label { color: var(--default); margin-bottom: 8px; }
.c-style .form-group.row { margin-bottom: 0; align-items: baseline;  }
.c-style .form-group.row[data-section="gatewayCover"] { align-items: flex-start;}
.c-style .form-group.row[data-section="gatewayCover"] > label { padding-top: 10px;}
.c-style .form-group { margin-bottom: 0; }
.c-style .form-group + .form-group { margin-top: 14px; }
.c-style .c-preview-form .form-group + .form-group { margin-top: 16px; }
.c-style .form-group.form-group-inline { margin-top: 16px; margin-bottom: 0; }
.c-style .form-group.form-group-inline + .form-group.form-group-inline { margin-top: 16px; margin-bottom: 0; }
.c-style .form-group + .form-group.footerAction { margin-top: 32px; }
.c-style .form-group + .form-group.footerAction .btnDelete { height: auto; }
.c-style .form-group + .form-group.footerAction .btn-link { padding: 0;}
.c-style .row.form-group .col-form-label { text-align: right; width: 100%; font: var(--typo-bold-body-lg); margin: 0; padding-left: 12px; padding-right: 12px; }
.c-style .row.form-group .col-form-label.col-form-label-top { padding-top: 10px; margin-bottom: auto; }
.c-style .row.form-group .col-form-label.col-12 { text-align: left; }
.c-style .row.form-group .col-form-label.col-auto { width: auto; }
.c-style .row.form-group:not(.footerAction) .col-form-label + div { line-height: var(--form-control-height); }
.c-style .row.form-group:not(.footerAction) .col-form-label + div > div ,
.c-style .c-preview-form .row.form-group:not(.footerAction) .col-form-label + div { line-height: normal;}
.c-form-highlight { margin-top: 28px; background: linear-gradient(to top, rgba(255, 255, 255, 92%), rgba(255, 255, 255, 92%)) var(--primary); padding: 12px 0; border-radius: 8px; position: relative; }
.c-form-highlight::before { content: ''; border: 1px solid var(--primary); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; border-radius: 8px; opacity: 0.3; }
.c-style .row.form-group .col-form-label.c-head-title-sub-form, .c-style .col-form-label.c-head-title-sub-form, .c-head-title-sub-form { text-align: left; margin-bottom: 16px; font: var(--typo-page-subtitle);}
.row.form-group.form-group-plaintext .col-form-label + div  { line-height: inherit; }

.eUniteApp #p24 .c-dropdown-toggle,
.c-style .dropdown .dropdown-toggle:not(.q-btn-icon) { padding-right: 16px; gap: 10px; font: var(--typo-body-lg); }
.eUniteApp #p24 .c-dropdown-toggle::after,
.c-style .dropdown .dropdown-toggle:not(.q-btn-icon)::after { content: '\e915'; font-size: 12px; color: #545555; height: 12px; width: 12px; margin-left: auto; margin-right: 0; display: flex; justify-content: center; align-items: center; font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 0; }

.c-input-group-lookup { flex-wrap: nowrap; }
.c-input-group-lookup .input-group-append .btn { border-radius: 8px; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; background-color: transparent; z-index: 3; background: var(--form-control-bg); }
.c-input-group-lookup:focus-within .form-control,
.c-input-group-lookup:focus-within .input-group-append .btn,
.c-input-group-lookup:focus-within .input-group-append .btn { background: var(--form-control-bg) !important; }
.c-input-group-lookup:hover .form-control,
.c-input-group-lookup:hover .input-group-append .btn,
.c-input-group-lookup .form-control:hover + .input-group-append .btn,
.c-input-group-lookup .form-control:hover ~ .input-group-append .btn { background: var(--form-control-hover-bg); }
.c-input-group-lookup .form-control:focus + .input-group-append .btn,
.c-input-group-lookup .form-control:focus ~ .input-group-append .btn,
.c-input-group-lookup .form-control:focus:hover ~ .input-group-append .btn { background: var(--form-control-bg); box-shadow: var(--form-control-focus-append-shadow); border-color: var(--form-control-focus-border); }
.c-style .c-input-group-lookup .dropdown-menu { left: 0 !important; margin-top: 4px; border: 1px solid #E3E6E8; border-radius: 8px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); filter: none; }

.c-style .c-input-group-lookup.c-input-group-lookup-multigroup { padding: 0; border: 1px solid var(--color-line); border-radius: 8px; flex-direction: column; overflow: visible; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup:focus-within,
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup:focus-within:hover { background: var(--form-control-bg); border-color: var(--form-control-focus-border); box-shadow: var(--form-control-focus-append-shadow); }
.c-input-group-lookup-multigroup-top { display: flex; }
/* .c-input-group-lookup-multigroup-top::before { content: '.'; visibility: hidden; margin-left: -3.53px; } */
.c-input-group-lookup-multigroup-top .form-control { border: 0; border-radius: 0 !important; border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; box-shadow: none !important; }
.c-input-group-lookup-multigroup-top .btn { border: 0; border-radius: 0 !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; box-shadow: none !important; }
.c-input-group-lookup-multigroup-bottom,
.select2-container .select2-selection--multiple .select2-selection__rendered { overflow: auto; max-height: 148px; display: flex; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.disabled { background: #FAFAFA !important; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.disabled .c-tag { --primary: #D7DADC; --badge-color: #E3E6E8; color: var(--text); }

.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly { background: var(--form-control-disabled-bg) !important; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .c-tag { --primary: #C5C7C9; --badge-color: #E3E6E8; color: var(--text); }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .c-input-group-lookup-multigroup-top { visibility: hidden; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .c-input-group-lookup-multigroup-bottom { margin-top: calc(-1 * var(--form-control-height)) !important; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .c-tag .btnRemove { display: none; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .form-control:disabled:placeholder-shown { background: var(--form-control-disabled-bg) !important; border-color: #E3E6E8 !important; font-size: 0; }
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .form-control:disabled:placeholder-shown + .input-group-append .btn,
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .form-control:disabled:placeholder-shown ~ .input-group-append .btn,
.c-style .c-input-group-lookup.c-input-group-lookup-multigroup.readonly .input-group-append .btn { background: var(--form-control-disabled-bg) !important; color: var(--form-control-disabled-txt); }

.c-style .c-input-group-lookup .c-input-group-lookup-multigroup ~ .dropdown-menu[style*="top: 0px"] { top: 100% !important; }
.c-input-group-lookup .c-input-group-lookup-multigroup { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--form-control-padding); padding-top: 10px; padding-bottom: 10px; border: 1px solid; border-right: 0; border-radius: 8px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-color: var(--form-control-border); background: var(--form-control-bg); color: var(--form-control-txt); font: var(--form-control-font); flex-grow: 1; align-items: baseline; max-height: 104px; overflow: auto; }
.c-input-group-lookup .c-input-group-lookup-multigroup .form-control { height: 20px; padding: 0; display: inline-flex; width: auto; flex-grow: 1; min-width: 200px; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0; }
.c-input-group-lookup:focus-within .c-input-group-lookup-multigroup,
.c-input-group-lookup:focus-within .c-input-group-lookup-multigroup ~ .input-group-append .btn { background: var(--form-control-bg); border-color: var(--form-control-focus-border); box-shadow: var(--form-control-focus-append-shadow); }
.c-input-group-lookup .c-input-group-lookup-multigroup .c-tag + .form-control { height: 24px; }
.c-input-group-lookup .c-input-group-lookup-multigroup .dropdown-menu { margin-top: 12px; }

.c-input-group-lookup:focus-within:not(:hover) { --form-control-border: var(--form-control-focus-border); --form-control-bg: #FFFFFF; }

.c-input-group-lookup:hover .input-group-append .btn:focus { border-color: var(--form-control-hover-border); }
.c-input-group-lookup .input-group-append .btn:focus{ border-color: #D8D8D8; }

.c-style .divLookupMulti + .divLookupMulti { margin-top: 16px; }
.c-style .divLookupItem.row + .actionBar { padding: 0; line-height: 0; /*margin-top: 8px; ปุ่ม add ใต้ form*/ }
.c-style .divMoreRoleList .divLookupItem.row + .actionBar { padding: 0; border: 0; }

.select2-selection.select2-selection--multiple { border-radius: 8px !important;
    /* padding-left: 12px !important; */
    /* padding-right: 0; */
    /* gap: 12px; */
    outline: 0 !important; border-color: var(--form-control-border);
    color: var(--form-control-font);
    min-height: var(--form-control-height);
	height: auto;
    /* padding: var(--dropdown-btn-padding); */
	padding: 0;
    background: var(--form-control-bg);
    display: flex; flex-direction: column; overflow: hidden; }
	.select2-selection.select2-selection--multiple:hover { border-color: var(--form-control-hover-border); }
	.select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid var(--form-control-focus-border) !important; box-shadow: var(--form-control-focus-shadow); }
.select2-container .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; }
.select2-container .select2-selection--multiple .select2-selection__rendered:empty { display: none; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 0; --badge-color: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary);
    font: var(--typo-body-lg);
    padding: 0;
    position: relative;
    border-radius: 4px;
    min-height: 24px;
    display: inline-flex;
    white-space: normal;
    text-align: left; background: var(--badge-color); border: 0; }
	.select2-container--default .select2-selection--multiple .select2-selection__choice:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 1px solid var(--primary);
		opacity: 0.3;
		border-radius: 4px;
	}
.select2-container .select2-selection--multiple .select2-search.select2-search--inline { order: -1; display: flex; flex-grow: 1; }
.select2-container .select2-selection--multiple .select2-search.select2-search--inline::after {     height: 34px;
    border-left: 0;
    background: transparent;
    min-width: 40px;
    color: var(--lookup-option-color);
    border-color: var(--form-control-border);
    /* border-top-right-radius: 4px; */
    /* border-bottom-right-radius: 4px; */
    padding: 0; font-size: 12px; content: "\e922"; font-family: 'pms-ico' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; align-items: center; cursor: pointer; }
	.select2-container .select2-selection--multiple .select2-search.select2-search--inline::after:hover { background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--secondary-txt);
		color: var(--secondary-txt); }
.select2-container--default .select2-search--inline .select2-search__field { --form-control-height: 34px; width: 100% !important; margin: 0; max-height: var(--form-control-height);
    height: 100%; padding: var(--form-control-padding);
    color: var(--form-control-txt);
    font: var(--form-control-font); border-top-left-radius: 8px; border-top-right-radius: 8px; flex-grow: 1; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border: 0; --primary: var(--color-qcolor3, var(--color-qcolor3));
    height: 22px;
    width: 23px;
    min-width: 23px;
    position: relative;
    z-index: 2;
    margin: 1px;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--text); font-family: 'pms-ico' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before {     content: "\e920"; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove span {display: none; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { order: -1; padding: 2px 8px; }


[data-share="1"] .select2-container--default.select2-container--disabled .select2-selection--multiple { border: 1px solid #E3E6E8; background: #EFF2F4; }
[data-share="1"] .select2-container--default.select2-container--disabled .select2-search.select2-search--inline { display: none; }
[data-share="1"] .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice { border: 1px solid rgba(167, 169, 171, 0.50); background: #E3E6E8; color: var(--form-control-disabled-txt); }
[data-share="1"] .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice::before { display: none; }
[data-share="1"] .select2-container--default.select2-container--disabled:hover .select2-selection--multiple,
[data-share="1"] .select2-container--default.select2-container--disabled.select2-container--focus:hover .select2-selection--multiple  { border-color: var(--form-control-hover-border) !important; }
[data-share="1"] .select2-container--default.select2-container--disabled.select2-container--focus .select2-selection--multiple { border-color: #E3E6E8 !important; }

.c-style .form-group-btn { display: flex; gap: 8px; }
.c-style .form-group .c-btn-moredetail { margin-top: 12px; padding: 0 !important; font: var(--typo-body-lg); text-decoration: underline !important; height: auto !important; }
.c-style .form-group .c-btn-moredetail-show[aria-expanded="true"] { display: none; }

.c-style .form-group.form-danger { --form-control-border: var(--danger); }
.c-style .form-group .text,
.c-style .form-group.form-danger .text.text-danger { display: flex; padding-left: 2px; margin-top: 2px; }

.c-style .q-header { min-height: 56px; }

.c-page-group { display: flex; align-items: flex-start; width: 100%; }
.c-page-group::before { content: ''; width: 50vw; height: 100%; background: #FAFCFE; left: 0; position: fixed; z-index: -1; }
.c-page-group::after { content: ''; width: 50vw; height: 100%; background: #FFF; right: 0; position: fixed; z-index: -1; }
.c-page-group-single:before,
.c-page-group-single::after { display: none; }

.c-page-content { flex-grow: 1; height: 100%; min-height: calc(var(--screen-height) - var(--c-page-header-height) - var(--height-header)); max-width: calc(100%); position: relative; z-index: 2; transition: .35s ease; display: flex; flex-direction: column; }
.c-page-content > br { display: none; }
.c-page-sidebar + .c-page-content { max-width: calc(100% - var(--sidebar-size)); border-left: 1px solid #E3E6E8; background: #FFF; }
.c-page-content .container { padding-left: 24px; padding-right: 0 ; }
.c-page-content .container.container-MyIndividualGoal { padding-top: 16px; padding-bottom: 16px; }

.c-page-body[data-sidebar="0"] .c-page-group::before { background: #FFF; }
.c-page-body[data-sidebar="0"] .c-page-content { --sidebar-size: 0px; border-left-color: transparent; }
.c-page-body[data-sidebar="0"] .c-todo-heading-line::before,
.c-page-body[data-sidebar="0"] .c-todo-heading::before,
.c-page-body[data-sidebar="0"] .c-form-footer::after,
.c-page-body[data-sidebar="0"] .c-form-footer::before,
.c-page-body[data-sidebar="0"] .c-userflow-group::before { left: -50vw; width: 200vw; /*transition: all 0s ease .35s;*/ }
.c-page-body[data-sidebar="0"] .c-page-content .container { padding-left: 0; }
.c-page-body[data-sidebar="0"] .c-page-sidebar + .c-page-content .c-content-group { padding-left: 0; }

/* SIDEBAR FILTERS */
.c-sidebar-filter { display: flex; gap: 6px; padding-right: 0; margin-bottom: 8px; }
nav + .c-sidebar-filter { margin-top: 12px; padding-bottom: 10px; border-bottom: 1px solid #E3E6E8; flex-direction: column; gap: 6px; margin-right: 14px; }
/* .c-filter-dropdown { flex-grow: 1; max-width: calc(100% - 16px - var(--btn-xl-height)); } */
.c-filter-dropdown .btn { width: 100%; justify-content: flex-start; color: var(--default); }
.c-sidebar-filter .c-input-group-search { --form-control-height: 32px; --lookup-option-color: #a7A9ab; }
.c-sidebar-filter .c-input-group-search .form-control { padding-right: var(--form-control-height); padding-bottom: 10px; }
.c-sidebar-filter .c-input-group-search .btn { min-width: var(--form-control-height); }
.c-sidebar-filter .c-input-group-search .btn i { font-size: 12px; min-width: 12px; height: 12px; }
.c-sidebar-filter .c-input-group-search .input-group-append { position: absolute; right: 0; height: var(--form-control-height); z-index: 3; }
.c-sidebar-filter .c-input-group-search .input-group-append { border: 0; box-shadow: none; }
.c-sidebar-filter .select2-container--default .select2-selection--single { --form-control-height: 32px; }
.c-sidebar-filter .dropdown .btn-sm i { --btn-sm-singleicon: 10px; }
.c-sidebar-filter .dropdown-menu { max-width: 160px; min-width: 160px; }
.c-filter-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow { min-width: var(--form-control-height) !important; width: var(--form-control-height) !important; }
.c-filter-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered { padding-bottom: 2px; }
.c-view-as .lbl_inbox_Viewas.c-view-as-label { margin-right: 12px; }

.c-page-sidebar { background: #FAFCFE; z-index: 1; display: flex; flex-direction: column; position: sticky; top: 0; }
.c-sidebar-body { overflow: auto; overflow-x: hidden; flex-grow: 1;     max-height: calc(100vh - 272px); }
.c-page-sidebar-height-auto .c-sidebar-wrapper { height: calc(var(--screen-height) - var(--height-header) - 86px); display: flex; flex-direction: column; }
.c-page-sidebar-height-auto .c-sidebar-body { max-height: unset; height: 100%; }
#p24 .c-page-sidebar-height-auto .c-sidebar-body { overflow-y: auto; }
.b-widget-item .c-page-sidebar-height-auto .c-sidebar-wrapper { height: auto;}
.c-sidebar-wrapper { min-width: var(--sidebar-size); max-width: var(--sidebar-size); padding-top: 20px; }
.c-page-sidebar .list-group-item { border-radius: 0; border: 0; background: transparent; padding: 7px 12px 8px 12px; color: var(--default); display: flex; gap: 8px; cursor: pointer; position: relative; }
.c-page-sidebar .list-group-item::before { content: ''; background: var(--primary); opacity: 0; position: absolute; top: 0; left: 0; width: 4px; height: 100%; display: block; z-index: 2; }
.c-page-sidebar .list-group-item::after { content: ''; width: 100%; height: 1px; background-color: var(--color-line); position: absolute; top: 0; left: 0; z-index: 1;  opacity: 0; }
.c-page-sidebar .list-group-item.active { background: linear-gradient(to top, rgba(255, 255, 255, 92%), rgba(255, 255, 255, 92%)) var(--primary); }
.c-page-sidebar .list-group-item.active::before { opacity: 0.6; }
.c-page-sidebar .list-group-item.active .c-user-title { font-weight: bold; }
.c-page-sidebar .list-group-item + .list-group-item.active { margin: 0; border: 0; }
.c-page-sidebar .list-group-item + .list-group-item { margin-top: 0; }
.c-page-sidebar .list-group-item + .list-group-item::after { opacity: 1; }
.c-page-sidebar .list-group-content { overflow: hidden; }
.c-page-sidebar .c-list-title { font: var(--typo-body-lg); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-break: break-word; }
.c-page-sidebar .list-group-item.active .c-list-title { font: var(--typo-bold-body-lg); color: var(--primary); filter: brightness(0.7); }
.c-page-sidebar .list-group-item .c-list-subtitle { margin-top: 0px; }
.c-page-sidebar .c-list-text { font: var(--typo-body-md); color: var(--text); margin-top: 2px; }
.c-page-sidebar .c-list-text:empty { display: none; }
.c-page-sidebar .list-group-item .custom-control.custom-checkbox { position: relative; z-index: 2; }
.c-page-sidebar .list-group-item .list-group-content > button,
.c-page-sidebar .list-group-item .list-group-content > .btn,
.c-page-sidebar .list-group-item .list-group-content > .actionBar { z-index: 2; position: relative; }
.c-page-sidebar .list-group-item .list-group-content > .actionBar { margin-top: 6px; }
.c-page-sidebar .list-group-item .list-action { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
.c-page-sidebar .list-group-item .actionBar { z-index: 2; position: relative; }

.c-searchfilter-body { padding-right: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-line); margin-bottom: 0; }
.c-searchfilter-body .col-form-label { font: var(--typo-bold-body-md); color: var(--text); text-align: left !important; }
.c-searchfilter-body .form-group + .form-group { margin-top: 8px; }
.c-searchfilter-body .btn.apply-search { min-width: 80px; margin-top: 8px; }
.c-viewas-label { margin-top: 12px; margin-bottom: 8px; padding-left: 12px; }
.c-viewas-label-heading { padding: 0; margin-bottom: 16px; font-weight: bold; margin-top: 0; }
.c-sidebar-filter + .collapse.show + .c-sidebar-body .c-viewas-label-heading { margin-top: 16px; }

.c-todo-heading { padding-bottom: 8px; padding-top: 6px; position: sticky; top: 0; z-index: 1; background: #ffffff; min-height: var(--line-top-inbox); display: flex; align-items: center; }
.c-todo-heading::before { content: ''; height: 100%; width: 100vw; background-color: white; position: absolute; top: 0; z-index: -1; left: 0px; }
.c-todo-heading .container { display: flex; gap: 12px; }
.c-todo-heading ~ .c-todo-heading-line { margin-top: 0; margin-bottom: 0; }
.c-todo-heading-content { flex-grow: 1; }
.c-todo-heading-avatar { width: 36px; height: 36px; min-width: 36px; }
.c-todo-heading-avatar img { width: 100%; height: 100%; border: 1px solid #D8D8D880; }
.c-todo-heading-title { font: var(--typo-bold-body-lg); }
.c-todo-heading-text { font: var(--typo-body-md); color: var(--text); }
.btn[data-toggle="collapse"][aria-expanded="false"] .c-ico-a-4 { transform: scale(-1); }

.c-todo-heading-line { position: sticky; top: var(--line-top-inbox); z-index: 2; margin-top: 0 !important; margin-bottom: 24px; border-color: var(--color-line);  } 
.c-todo-heading-line::before { content: ''; border-top: 1px solid var(--color-line); position: absolute; display: block; width: 100vw; left: 0; top: -1px; z-index: 1; }

.c-userflow { z-index: 0; position: relative; }
.c-userflow-group { display: flex; gap: 36px; overflow: auto; padding-top: 0; padding-bottom: 8px; }
.c-userflow-group::before { content: ''; height: 100%; width: 100vw; background-color: white; position: absolute; top: 0; z-index: -1; left: 0px; }
.c-userflow-avatar { width: 28px; min-width: 28px; height: 28px; } 
.c-userflow-avatar img { width: 100%; height: 100%; border: 1px solid #D8D8D880; }
.c-userflow-item { max-width: 200px; min-width: 200px; width: 100%; position: relative; line-height: 1; }
.c-userflow-item:first-child { margin-left: auto; }
.c-userflow-item:last-child { margin-right: auto; }
.c-userflow-box { padding: 8px 12px; border-radius: 8px; background: #FFFFFF; border: 1px solid #D7DADC; display: flex; gap: 8px; align-items: center; margin-top: 4px; text-align: left; }
.c-userflow-content { overflow: hidden; flex-grow: 1; }
.c-userflow-title { font: var(--typo-bold-body-md); color: var(--default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-userflow-text { font: var(--typo-body-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-userflow-text [data-status] { display: inline-flex; align-items: center; gap: 4px; }
.c-userflow-text [data-status]::after { content: ''; width: 8px; height: 8px; min-width: 8px; border-radius: 50%; display: inline-flex; order: -1; }
.c-userflow-text [data-status="1"]::after { background-color: #fcc16a; }
.c-userflow-text [data-status="2"]::after { background-color: #61D39C; }
.c-userflow-text [data-status="11"]::after { background-color: #E73C16; }
.c-userflow-text [data-status="12"]::after { background-color: #E73C16; }
.c-userflow-dot { width: 10px; height: 10px; border: 2px solid #FFF; background: #E3E6E8; border-radius: 50%; z-index: 1; position: relative; }
.c-userflow-progress { display: flex; justify-content: center; align-items: center; }
.c-userflow-progress::before { content: ''; height: 2px; width: calc(50% + 18px); position: absolute; background: #E3E6E8; right: 50%; opacity: 0; }
.c-userflow-item + .c-userflow-item .c-userflow-progress::before { width: calc(100% + 36px); opacity: 1; }
.c-userflow-item.active .c-userflow-dot { background: var(--success); }
.c-userflow-item.danger .c-userflow-dot { background: var(--danger); }
.c-userflow-item.warning .c-userflow-dot { background: var(--warning); }
.c-userflow-item .c-userflow-toggle { height: auto; font: var(--typo-body-md); text-decoration: underline; padding: 0; border: 0; margin: 0 auto; margin-top: 8px; display: block; }

.c-content-group { display: flex; gap: 16px; align-items: flex-start; z-index: 0; height: 100%; flex-grow: 1; } /* Add Padding Fixed Bug when Open Datepicker */

/* custom inbox */
.c-page-sidebar .c-list-title.subject1-2lines{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.c-page-sidebar .c-list-subtitle.subject1-2lines.subject2{display:none}

.c-style .c-page-sidebar .custom-control-input ~ .custom-control-label::before {line-height: 14px; font-size: 14px; top: 0px; left: 0; max-width: 14px; color: #a7a9ab;}
.c-style .c-page-sidebar .custom-control.custom-checkbox .custom-control-label, 
.c-style .c-page-sidebar .custom-control.custom-radio .custom-control-label { gap: 6px; display: flex; align-items: center; justify-content: center; margin-left: 4px; padding: 4px;}
.c-style [data-status="active"] .custom-control.custom-checkbox.divCheckItem[style*="none"] + .list-group-content { padding-left: 0; }
.c-style .c-page-sidebar .list-group-item { padding-left: 12px; /*padding-left: 0;*/ gap: 0;}
.c-style .c-page-sidebar [data-status="archive"] .list-group-item { padding-left: 12px;}

/* CONTENT MENU */
.c-content-menu { min-width: var(--content-menu-size); max-width: var(--content-menu-size); border-radius: 12px; background: #FFFFFF; padding: 0; padding-bottom: 20px; top: calc(88px + 24px); position: sticky; }
.c-page-sidebar + .c-page-content .c-content-menu { background: #FAFAFA; }
.c-content-menu-top-0 { top: 109px; margin-top: 20px; } /* top: 32px; */
.c-page-group.c-page-group-single .c-content-menu-top-0 { top: 20px; }
.c-page-group.c-page-group-single .c-todo-heading ~ .c-content-group .c-content-menu-top-0 { top: 85px }
.c-content-menu.c-content-menu-jumptosection { top: 32px; }
.c-page-sidebar + .c-page-content .c-content-group { padding-left: var(--content-padding-x); }
.c-page-sidebar + .c-page-content .c-todo-heading-line ~ .c-content-group { padding-top: 24px; }
.c-content-menu-title { font: var(--typo-bold-body-md); }
.c-content-menu-text { font: var(--typo-body-md); color: var(--text); }
.c-content-menu-text * { background: transparent !important; font-family: var(--font-family-body); }
.c-content-menu .nav { margin-top: 8px; flex-direction: column; padding-left: 12px; position: relative; padding-right: 16px; gap: 12px 0; }
.c-content-menu .nav::before { content: ''; width: 3px; height: 100%; border-radius: 3px; position: absolute; left: 2px; top: 0; background-color: #DCDFE4; }
.c-content-menu .nav .nav-link { text-align: left; padding: 6px 8px; position: relative; border-radius: 6px; color: var(--default); }
.c-content-menu .nav .nav-link::before { content: ''; width: 3px; height: 100%; border-radius: 3px; background: var(--primary); position: absolute; left: -10px; top: 0; opacity: 0; }
.c-content-menu .nav .nav-link .text { font: var(--typo-body-sm); gap: 6px;  align-items: baseline; display: none; }
.c-content-menu .nav .nav-link .text i { font-size: 8px; }
.c-content-menu .nav .nav-link.error:not(.active) { border: 1px solid var(--danger); }
.c-content-menu .nav .nav-link.error:not(.active) .text { display: flex; }
.c-content-menu .nav .nav-link.active::before { opacity: 1; }
.c-content-menu .nav .nav-link.active { font: var(--typo-bold-body-lg); background: linear-gradient(to top, rgba(255, 255, 255, 85%), rgba(255, 255, 255, 85%)) var(--primary); }
.c-content-menu .nav .nav-link + .nav-link { margin-top: 0; }
.c-content-menu .nav .nav-link:not(.active):not(.error):hover { background-color: #DCDFE4; }
.c-content-menu .nav .nav-link.active span { color: var(--primary); filter: brightness(0.7); }

/* nav tab left ver.2 */
.c-content-menu .nav.nav-pills-ver2 { padding-left: 0; padding-right: 0;}
.c-content-menu .nav.nav-pills-ver2::before,
.c-content-menu .nav.nav-pills-ver2 .nav-link::before { display: none;}

.c-list { display: flex; border: 1px solid #E3E6E8; padding: 12px; border-radius: 8px; background: #FFFFFF; }
.c-list + .c-list { margin-top: 8px; }
.c-list .c-list-avatar { margin-right: 12px; }
.c-list .c-list-avatar img { width: 40px; height: 40px; background: #FFF; border: 1px solid #D8D8D880; }
.c-list .c-list-content { flex-grow: 1; }
.c-list-title { font: var(--typo-body-lg); color: var(--default); }
.c-list-txt { font: var(--typo-body-md); color: var(--grey); margin-top: 2px; }
.c-list .c-list-icon { margin-right: 8px; min-width: 20px; }
.c-list-group + .c-card-header { margin-top: 24px; }
.c-list .content { width: 100%; display: flex; }

.c-card-header { display: flex; margin-bottom: 12px; align-items: baseline; gap: 12px; }
.c-style .c-card-header .btn { margin-top: 0; }
.c-style .c-card-header .btn.btnPageLink { border: 0 !important; }
.c-card-header-title { font: var(--typo-page-subtitle); padding: 3px 0; flex-grow: 1; }

.c-page-dashboard > .container,
.c-page-single > .container { padding-top: 32px; padding-bottom: 32px; }
.c-page-dashboard .c-card-header-title { font: var(--typo-page-subtitle); }

.c-content-body { flex-grow: 1; }
.c-page-group-single .c-content-body { padding-top: 16px; padding-bottom: 16px; }
.c-content-menu + .c-content-body { align-self: stretch; max-width: calc(100% - var(--content-menu-size) - 16px); border-left: 1px solid var(--color-line); padding-left: 24px; }
.c-content-menu.hide + .c-content-body { max-width: 100%; }
.c-content-heading { margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.c-content-heading-title { font: var(--typo-page-subtitle); color: var(--primary); filter: brightness(0.7); }
/* .c-content-heading .c-content-heading-subtext { font: var(--typo-bold-body-xl); กระทบกับ text ใc-content-heading-subtext }  */
.c-content-heading .badge { margin-right: auto; background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 90%)) var(--primary); min-width: 24px; width: fit-content; height: 24px; border-radius: 6px; font: var(--typo-bold-body-lg); color: var(--primary); align-self: center; }
.c-content-heading-text { font: var(--typo-body-md); color: var(--text); margin-left: auto; /*font: var(--typo-body-sm);*/ }
.c-content-heading-subtext + .c-content-heading-subtext::before { content: ''; border-left: 1px solid var(--text); margin: 0 8px; }
.c-content-heading-subtext:has([data-fld="rating"]) { color: var(--default);}
.c-content-heading.heading-has-sub { margin-bottom: 8px; }
.c-content-heading .btn.btnHideSession { padding: 0; }
.c-content-subheading { margin-bottom: 24px; font: var(--typo-body-lg); }
.c-content-subheading:empty { /*height: 16px;*/ margin-bottom: 0; }
.c-content-subheading * { font-family: var(--font-family-body) !important; line-height: var(--line-height) !important; }
.c-card:not([style*="none"]) + .c-card { margin-top: 40px; }
.c-content-body hr { border-color: #D9D9D9; margin: 24px 0; }

#todo-reviewandsubmit .reviewSubCPE { margin-top: 0; }

.calendar-open .c-content-form { padding-bottom: 180px; }
.calendar-open .modal.c-modal .modal-body { padding-bottom: 240px; }
.c-content-form { margin-top: 12px; }
.card-body > .c-content-form:first-child { margin-top: 0; }

.lookup-open .c-content-form { padding-bottom: 200px;} /* support lookup bottom  */

.c-card .card-header:not(.c-accordion-card-header) { padding: 10px 20px !important; border: 0; background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--primary); border-top-left-radius: 8px; border-top-right-radius: 8px; }

.c-content-detail { margin-top: 16px; }
.c-content-detail-item { display: flex; align-items: baseline; gap: 8px; }
.c-content-detail-item + .c-content-detail-item { margin-top: 8px; }
.c-content-detail-label { font: var(--typo-bold-body-lg); color: var(--text); min-width: 86px; }
.c-content-detail-text { flex-grow: 1; }
.c-content-detail-text.c-input-group-lookup { display: flex; position: relative; gap: 0px; align-items: baseline; }
.c-content-detail-text.c-input-group-lookup .c-input-group-selectedicon { position: relative; top: inherit; left: inherit; align-self: baseline; }
.c-content-detail-groupbtn { display: flex; gap: 8px; margin-bottom: 12px; }
.c-content-detail-groupbtn .btn { width: 40px; height: 40px; min-width: 40px; }
.c-content-detail-link { padding: 0 !important; text-decoration: underline !important; font: var(--typo-body-lg) !important; height: auto !important; }

.c-content-card-heading { margin-bottom: 4px; display: flex; align-items: baseline; justify-content: space-between; }
.c-content-card-heading-label { font: var(--typo-bold-body-xl); }
.c-content-card-heading-text { font: var(--typo-body-md); color: var(--text); margin-left: auto; white-space: nowrap; }
.c-content-card-heading-text.cntText { font: var(--typo-body-sm); }
.card-header .c-content-card-heading { margin: 0; }
.c-content-card-heading + .dataTables_wrapper { margin-top: 8px; }
.c-content-card .c-uploadfile-item { align-items: center; }
.c-content-card-heading + [data-fld="goalDescription"] * { font-family: var(--font-family-body) !important; line-height: var(--line-height) !important; }

.c-style .btn.btnConversation,
.c-style .btn.btnMilestone { border-radius: 8px; }

.c-content-card-group { margin-top: 28px; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.c-content-card { padding: 12px; background-color: #FFFFFF; border: 1px solid var(--color-line-darker); border-radius: 8px; overflow: hidden; position: relative; }
.c-content-card.active { background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--primary); border-color: transparent; }
.c-content-card.active::before { content: ''; border: 1px solid var(--primary); width: calc(100% + 0px); height: calc(100% + 0px); position: absolute; left: 0; top: 0; /*z-index: 2;*/ border-radius: 8px; opacity: 0.5; }
.c-content-card > * { position: relative; z-index: 1; }
.c-content-card-user { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--color-line-darker); background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--primary); margin: 0 -12px; margin-top: -12px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.c-content-card.active .c-content-card-user { border-bottom-color: #FFFFFF; }
.c-content-card.active .c-content-card-user::before { content: ''; border-bottom: 1px solid var(--primary); opacity: 0.5; position: absolute; display: block; bottom: -1px; left: 0; width: 100%; }
.c-content-card.active .c-content-card-user { background: linear-gradient(to top, rgba(255, 255, 255, 70%), rgba(255, 255, 255, 70%)) var(--primary); }
.c-content-card-user-content { overflow: hidden; }
.c-content-card-user-title { font: var(--typo-bold-body-md); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.c-content-card-user-text { font: var(--typo-body-sm); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: var(--text); }
.c-content-card-user-avatar { width: 28px; height: 28px; min-width: 28px; }
.c-content-card-user-avatar img { width: 100%; height: 100%; border: 1px solid #D8D8D880; }
.c-content-card-rating { margin: 12px 0; min-height: 40px; display: flex; align-items: center; }

.c-content-card-comment-file { border: 1px solid var(--color-line); border-radius: 6px; background: #FFFFFF; padding: 3px 7px 3px 5px; display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.c-content-card-comment-file + .c-content-card-comment-file { margin-top: 4px; }
.c-content-card-comment-file i { font-size: 24px; }
.c-content-card-comment-label { font: var(--typo-bold-body-md); margin-bottom: 4px; color: var(--text); }
.c-card-comment-file-label { font: var(--typo-body-md); display: flex; align-items: baseline; overflow: hidden; }
.c-card-comment-file-name {  white-space: nowrap; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: block; flex-grow: 1; }

.c-card.c-content-attendance-card { width: 50%; border: 1px solid var(--color-line) !important; box-shadow: none !important; border-radius: 8px !important; }
.c-card.c-content-attendance-card.border-0 { border: 0 !important; }
.c-content-attendance-item { display: flex; align-items: baseline; }
.c-content-attendance-item + .c-content-attendance-item { margin-top: 12px; }
.c-content-attendance-label { flex-grow: 1; }
.c-content-attendance-text { text-align: right; width: 30%; }
.c-content-attendance-card .card-footer { padding: 20px; padding-top: 12px; font: var(--typo-bold-body-lg); border-color: var(--color-line); background: #FAFAFA; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.c-card.c-content-attendance-card .card-body { padding: 20px !important; padding-bottom: 12px !important; }

.c-content-acknowledgement-comment label { font: var(--typo-bold-body-lg); margin-bottom: 8px; }

/* CARD TABLE */
.c-card.c-card-table { border: 0 !important; border-radius: 0; box-shadow: none !important; overflow: unset; } /* overflow: hidden; */
.c-card.c-card-table + .c-card.c-card-table { margin-top: 24px; }
.c-card.c-card-table .card-header { padding: 0 !important; border-bottom: 0; border-radius: 0 !important; background: transparent; }
.c-card.c-card-table .card-header .c-content-card-heading-label { font: var(--typo-bold-body-lg); }
.c-card.c-card-table .card-header { margin-bottom: 12px; }

.c-content-card-comment .c-btn-uploadfile { margin-top: 16px !important; }
.c-content-card-comment textarea.form-control { min-height: 76px !important; }

.dataTables_wrapper.no-footer .dataTables_scrollBody .q-datatable.dataTable > tbody > tr > td.c-accordion-th-highlight { background-color: #FAFAFA !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody .q-datatable.dataTable > tbody > tr > td.c-accordion-th-border-left { border-left: 1px solid var(--color-line) !important; }

/* TABS */
.c-style .nav-tabs { min-height: 28px; }
.c-style .nav-tabs .nav-link { border-bottom-width: 3px; padding-bottom: 8px; height: 28px; }
.c-style .nav-tabs .nav-link:not(.active) { font-weight: normal; }

/* COMMENT */
.c-form-comment { margin-top: 24px; }
.c-form-comment-item + .c-form-comment-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.c-form-comment-user { display: flex; gap: 8px; align-items: center; }
.c-form-comment-user-avatar img { width: 32px; height: 32px; border: 1px solid #D8D8D880 }
.c-form-comment-user-title { font: var(--typo-bold-body-md); }
.c-form-comment-user-text { font: var(--typo-body-md); color: var(--text); }
.c-form-comment-text { margin-top: 16px; }

.c-form-footer { position: sticky; bottom: 0; margin-top: auto; border-top: 1px solid #E3E6E8; background-color: #FFFFFF; }
.c-form-footer::before { content: ''; border-top: 1px solid #E3E6E8; position: absolute; display: block; width: 100vw; left: 0; z-index: 1; top: -1px; }
.c-form-footer::after { content: ''; height: var(--form-footer-height); width: 100vw; background-color: #FFFFFF; position: absolute; top: 0; }
.c-form-footer .container { max-width: 100%; width: 100%; margin: 0; padding: 8px 24px 4px; padding-right: 0; z-index: 2; position: relative; height: var(--form-footer-height); display: flex; gap: 16px; }
.c-form-footer .btn { padding: 6px 12px; }

.c-form-delete { padding: 0 20px; margin-top: 20px; }
.c-form-delete .btn { left: -12px; position: relative; }

.form-group-taginput .form-control {
	--tag-pad: 2px 8px;
	--tag-remove-btn-bg--hover: transparent;
}
.form-group-taginput .form-control { height: auto; display: flex; gap: 8px; }
.form-group-taginput .tagify__tag { border-radius: 4px; margin: 0; background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--primary) !important; cursor: pointer; }
.form-group-taginput .tagify__tag > div::before { box-shadow: none !important; border: 1px solid var(--primary); opacity: 0.3; border-radius: 4px; }
.form-group-taginput .tagify__tag > div > * { font: var(--typo-body-lg); color: var(--default) !important; }
.form-group-taginput .tagify__tag:focus div::before, 
.form-group-taginput .tagify__tag:hover:not([readonly]) div::before { --tag-bg-inset: 0; }
.form-group-taginput .tagify__input { margin: 0; }
.form-group-taginput .tagify__tag__removeBtn { width: 24px; height: 24px; margin: 0; color: var(--text); }
.form-group-taginput .tagify__tag__removeBtn:hover { color: var(--text); }
.form-group-taginput .tagify__tag__removeBtn::after { content: "\e90c"; font-family: 'qbic-icon-font' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.form-group-taginput .tagify__tag__removeBtn:hover+div>span { opacity: 1; }

.c-page-body-header { margin-top: 16px; display: flex; min-height: 40px; }
.c-page-body-header-left { margin-right: auto; }
.c-page-body-header-right { display: flex; justify-content: flex-end; margin-left: auto; gap: 16px; }
.c-page-body-header-right .btn { height: 36px; }
.c-page-body-list { padding-bottom: 20px; margin-top: 12px; }
.c-page-body-header + .c-page-body-list { margin-top: 8px; }

/* TABLES */
.c-table { display: table;width: 100%; border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; }
.c-table .c-table-cell { border: 0; border-top: 1px solid var(--color-line); padding: 6px 16px; font: var(--table-font-body) }
.c-table-heading .c-table-cell { border: 0; background: var(--table-header-bg); color: var(--table-header-color); font: var(--typo-bold-body-md); }
.c-table-heading [sendstatus="DONE"] .c-table-cell.fld_status { color: var(--success); }
.c-table-heading [sendstatus="FAIL"] .c-table-cell.fld_status { color: var(--danger); }

/* TABLES CUSTOM USING DIV */
.c-tablediv { display: table; width: 100%; border: 1px solid var(--color-line); border-radius: 8px; /* overflow: hidden */ --table-header-color: var(--default); }
.c-tablediv-row { display: table-row; }
.c-tablediv-cell { border: 0; border-top: 1px solid var(--table-line); padding: 12px 12px; font: var(--table-font-body); display: table-cell; position: relative; }
.c-tablediv-heading .c-tablediv-cell { border: 0; border-bottom: 1px solid var(--table-line); background: var(--table-header-bg); color: var(--table-header-color); font: var(--typo-bold-body-md); vertical-align: bottom; white-space: nowrap; }
.c-tablediv-row.HN { height: 408px; position: relative; overflow: hidden; }
.c-tablediv-row.HN .c-tablediv-cell { border: 0; padding: 0; }
.c-tablediv-row.HN .c-tablediv-cell .c-emptystate { position: absolute; width: 100%; border-top: 1px solid var(--color-line); }
.c-tablediv.c-tablediv-sticky { position: relative; }
.c-tablediv.c-tablediv-sticky .c-tablediv-heading .c-tablediv-cell { position: sticky; top: 0; background: #FFFFFF; z-index: 5; }
.c-tablediv.c-tablediv-sticky::before { z-index: 6; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><g clip-path="url(%23clip0_3346_13208)"><mask id="path-1-inside-1_3346_13208" fill="white"><path d="M8 1C4.13401 1 1 4.13401 1 8H0C0 3.58172 3.58172 0 8 0V1Z"/></mask><path d="M1 8V9H2V8H1ZM8 1V2H9V1H8ZM0 8H-1V9H0V8ZM8 0H9V-1H8V0ZM2 8C2 4.68629 4.68629 2 8 2V0C3.58172 0 0 3.58172 0 8H2ZM1 8C1 4.13401 4.13401 1 8 1V-1C3.02944 -1 -1 3.02944 -1 8H1ZM7 0V1H9V0H7ZM1 7H0V9H1V7Z" fill="%23E3E6E8" mask="url(%23path-1-inside-1_3346_13208)"/></g><defs><clipPath id="clip0_3346_13208"><rect width="8" height="8" fill="white"/></clipPath></defs></svg>'); background-repeat: no-repeat; background-size: contain; background-position: top right; content: ''; width: 8px; height: 8px; display: block; position: absolute; top: -1px; left: -1px; }
.c-tablediv.c-tablediv-sticky::after { z-index: 6; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><g clip-path="url(%23clip0_3346_13208)"><mask id="path-1-inside-1_3346_13208" fill="white"><path d="M8 1C4.13401 1 1 4.13401 1 8H0C0 3.58172 3.58172 0 8 0V1Z"/></mask><path d="M1 8V9H2V8H1ZM8 1V2H9V1H8ZM0 8H-1V9H0V8ZM8 0H9V-1H8V0ZM2 8C2 4.68629 4.68629 2 8 2V0C3.58172 0 0 3.58172 0 8H2ZM1 8C1 4.13401 4.13401 1 8 1V-1C3.02944 -1 -1 3.02944 -1 8H1ZM7 0V1H9V0H7ZM1 7H0V9H1V7Z" fill="%23E3E6E8" mask="url(%23path-1-inside-1_3346_13208)"/></g><defs><clipPath id="clip0_3346_13208"><rect width="8" height="8" fill="white"/></clipPath></defs></svg>'); background-repeat: no-repeat; background-size: contain; background-position: top right; content: ''; width: 8px; height: 8px; display: block; position: absolute; top: -1px; right: -1px; transform: rotate(90deg); }

.c-scroll-tablediv { border: 1px solid var(--color-line); border-radius: 8px; overflow: auto;}
.c-scroll-tablediv .c-tablediv { border: 0;}

/* DATATABLES */
body > .dtfh-floatingparent.dtfh-floatingparenthead { display: none; }
.dataTables_wrapper.c-datatable-pill-wrapper { margin-top: -12px; }
.c-style .dataTables_wrapper:not(.c-datatable-pill-wrapper) .dataTables_scroll { border: 1px solid var(--table-line); border-radius: 8px; }
/* .c-style .divTopic .dataTables_wrapper:not(.c-datatable-pill-wrapper) .dataTables_scroll { border: 0; } */
.c-style .dataTables_wrapper:not(.c-datatable-pill-wrapper) .dataTables_scroll .dataTables_scrollBody > table { border-collapse: collapse; /*overflow: hidden;*/ }

.c-style .q-datatable.dataTable { border-radius: 8px; overflow: visible; min-width: 100%; border: 0 !important; border-bottom: 1px solid transparent !important; }
.c-style .q-datatable .form-control { height: var(--form-control-height); }
.c-style .q-datatable .row.form-group.form-group-vertical .col-form-label { text-align: left; font: var(--typo-bold-body-md); color: var(--default); margin-bottom: 4px; }
.c-style .q-datatable .row.form-group + .row.form-group { margin-top: 14px; }
.c-style .q-datatable .row.form-group + div[class*='itemUploadList'] { margin-top: 12px; }
.c-style .q-datatable textarea.form-control { --form-control-textarea-height: var(--form-control-height); max-height: calc(var(--line-height) * 3rem + 18px); padding: 6px 12px; height: 100%; } 
.c-style .dataTables_scrollHead { position: sticky !important; top: 0; z-index: 3; background-color: var(--table-header-bg); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid var(--table-line-header) !important; }
.c-style .q-datatable.q-datatable-pill .col-fit-content { width: 1% !important; }
.c-style .q-datatable.dataTable tbody > tr { position: relative; }
.c-style .q-datatable.dataTable thead > tr > th.sorting_asc.no-sort:before,
.c-style .q-datatable.dataTable thead > tr > th.sorting_asc.no-sort:after { display: none !important; }
.c-style .q-datatable.dataTable > thead > tr > th, 
.c-style .q-datatable.dataTable > thead > tr > td, 
.c-style .q-datatable.dataTable > tfoot > tr > th, 
.c-style .q-datatable.dataTable > tfoot > tr > td { font: var(--typo-bold-body-md); vertical-align: top; padding: 12px 12px; }
.c-style .q-datatable.dataTable > tbody > tr > th, 
.c-style .q-datatable.dataTable > tbody > tr > td { font: var(--table-font-body); padding: 12px 12px; }
.c-style .q-datatable.dataTable .no-wrap { white-space: nowrap; max-width: fit-content; }
.c-style .q-datatable.dataTable > thead > tr:first-child > th:first-child { border-top-left-radius: 8px; }
.c-style .q-datatable.dataTable > thead > tr:first-child > th:last-child { border-top-right-radius: 8px; }
.c-style .q-datatable.dataTable > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 8px; }
.c-style .q-datatable.dataTable > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 8px; }
.c-style .dataTables_wrapper.no-footer .dataTables_scrollBody .table-striped.q-datatable.dataTable>tbody>tr>td { background-color: transparent;}
.c-style .q-datatable.dataTable > thead > tr > th:first-child, 
.c-style .q-datatable.dataTable > thead > tr > td:first-child, 
.c-style .q-datatable.dataTable > thead > tr > th[style*=none]:first-child + th, 
.c-style .q-datatable.dataTable > thead > tr > td[style*=none]:first-child + td, 
.c-style .q-datatable.dataTable > tbody > tr > th:first-child, 
.c-style .q-datatable.dataTable > tbody > tr > td:first-child, 
.c-style .q-datatable.dataTable > tbody > tr > th[style*=none]:first-child + th, 
.c-style .q-datatable.dataTable > tbody > tr > td[style*=none]:first-child + td, 
.c-style .q-datatable.dataTable > tfoot > tr > th:first-child, 
.c-style .q-datatable.dataTable > tfoot > tr > td:first-child { padding-right: 16px; }
.c-style .q-datatable.dataTable > tbody > tr > td.q-datatable-middle { vertical-align: middle !important; }
.c-style .q-datatable.dataTable > tbody > tr > td .c-users-title { font-weight: normal; }
.c-style .q-datatable.dataTable > tbody > tr > th, 
.c-style .q-datatable.dataTable > tbody > tr > td { border-top-color: var(--table-line) !important; }

.c-style .dataTables_wrapper .dataTables_paginate > span:not(.select2) { white-space: nowrap; }

.c-style .q-datatable.dataTable .btn[data-toggle="dropdown"]:active,
.c-style .q-datatable.dataTable .btn[data-toggle="dropdown"]:focus,
.c-style .q-datatable.dataTable .show>.btn-outline-secondary.dropdown-toggle,
.c-style .q-table .q-table-groupaction .btn.btn-outline-secondary[data-toggle="dropdown"]:active,
.c-style .q-table .q-table-groupaction .btn.btn-outline-secondary[data-toggle="dropdown"]:focus,
.c-style .q-table .show>.btn-outline-secondary.dropdown-toggle { border-color: #E3E6E8 !important; background: #EFF2F4 !important; }
.c-style .dataTables_wrapper.no-footer .dataTables_scrollBody .q-datatable.dataTable > tbody > tr:focus-within .dtfc-fixed-right { z-index: 2; }

.c-style .q-datatable.dataTable .btn[data-toggle="collapse"] { padding: 0 !important; height: 18px; width: 18px; font-size: 12px; border: 0 !important; text-decoration: none; background: transparent !important; position: relative; z-index: 2; }
.c-style .q-datatable.dataTable .btn[data-toggle="collapse"] i { font-size: inherit; position: relative; transition: all 0.3s; }
.c-style .q-datatable.dataTable .btn[data-toggle="collapse"][aria-expanded="false"] i { transform: rotate(-90deg); }
.c-style .q-datatable.dataTable tr.heading > td.dtfc-fixed-left { z-index: 2; }
.c-style .q-datatable.dataTable tr.heading > td:first-child::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 1px); box-shadow: -6px 3px 6px 0px rgba(0, 0, 0, 0.08); border-bottom: 1px solid #E3E6E8; z-index: 1; visibility: hidden; }
.c-style .q-datatable.dataTable tr.heading.active > td:first-child::before { visibility: visible; }

.c-style .q-datatable.dataTable tr.heading > td.dtfc-fixed-left + td::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 1px); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08); border-bottom: 1px solid #E3E6E8; z-index: 1; visibility: hidden; }
.c-style .q-datatable.dataTable tr.heading.active > td.dtfc-fixed-left::before{ visibility: visible; }
.c-style .q-datatable.dataTable tr.heading.active > td.dtfc-fixed-left + td::before { visibility: visible; }

.c-style .q-datatable.dataTable tr.heading > td:first-child { border-bottom-left-radius: 8px !important; }
.c-style .q-datatable.dataTable tr.heading > td:last-child { border-bottom-right-radius: 8px !important; }
.c-style .q-datatable.dataTable tr.collapse > td { background-color: #FBFCFC !important; }
.c-style .q-datatable.dataTable tr.collapse > td.col-bg-grey { background-color: #F5F8FA !important; }
.c-style .q-datatable.dataTable tr > td .text-truncate[data-toggle="popover"] { font: var(--typo-body-md); color: var(--text); cursor: pointer; }

.c-style .q-datatable.dataTable .border-right { border-right-color: var(--color-line) !important; }
.c-style .q-datatable.dataTable .border-left { border-left: 1px soid var(--color-line); }
.c-style .q-datatable.dataTable .border-bottom { border-bottom-color: var(--color-line) !important; }

.c-style .dataTables_wrapper .dataTables_info { color: var(--text); font: var(--typo-body-md); margin-top: 16px; }
.c-style .dataTables_wrapper .dataTables_paginate { color: var(--text); font: var(--typo-body-md); margin-top: 16px; }
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.btn { margin: 0; border: 1px solid var(--secondary-border); border-radius: 8px; min-width: 32px; padding: 0; }
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.btn i { color: var(--secondary-txt); }
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.btn.next { order: 8; }
.c-style .dataTables_wrapper .dataTables_length .select2-container--default .select2-selection--single, 
.c-style .dataTables_wrapper .dataTables_paginate .select2-container--default .select2-selection--single { gap: 0; min-width: 68px; }
.c-style .dataTables_wrapper .dataTables_paginate > .paginate_page { display: none; }
.c-style .q-datatable.dataTable .dtfc-fixed-right .dropdown { text-align: right; }
.c-style .dataTables_wrapper:not(.c-datatable-pill-wrapper) .dataTables_scroll .dataTables_scrollBody .dataTable { min-height: 0px; } /* 180px this min-height not work for many tables */
.c-style .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { z-index: 0; }
.c-style .c-modal .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { overflow: unset !important; }
.c-style .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody .bootstrap-datetimepicker-widget { inset: var(--form-control-height) auto auto auto !important; }

.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; }

/* clear sort style */
.c-style .q-datatable.dataTable thead > tr > th.sorting, 
.c-style .q-datatable.dataTable thead > tr > td.sorting { padding-right: 16px !important; }
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th::before,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th::before { display: none; } 
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th::after,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th::after { display: none; } 
.c-style .dataTables_wrapper .q-datatable.dataTable thead > tr > th span,
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th span,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th span { display: inline-block; padding-right: 20px; position: relative; }
.c-style .dataTables_wrapper .q-datatable.dataTable thead > tr > th[class*="sorting"]:not(.sorting_disabled) span::after,
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th[class*="sorting"]:not(.sorting_disabled) span::after,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th[class*="sorting_"]:not(.sorting_disabled) span::after { content: '' !important; display: inline-flex !important; bottom: inherit; left: inherit; height: 10px; width: 16px; min-width: 16px !important; opacity: 1 !important; background-size: contain; background-position: center; background-repeat: no-repeat; margin-left: 4px; position: absolute; right: 0; top: 4px; } 
.c-style .dataTables_wrapper .q-datatable.dataTable thead > tr > th span::after,
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th span::after,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th span::after { background-image: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.43505 0.197958L7.86578 3.06991C8.17515 3.43441 7.91629 4 7.43015 4H2.56867C2.08884 4 1.82367 3.44069 2.13304 3.06991L4.56377 0.197958C4.79106 -0.0659857 5.20776 -0.0659857 5.43505 0.197958Z" fill="%23D2D3D4"/><path d="M4.56495 9.80204L2.13422 6.93009C1.82485 6.56559 2.08371 6 2.56985 6H7.43133C7.91116 6 8.17633 6.55931 7.86696 6.93009L5.43623 9.80204C5.20894 10.066 4.79224 10.066 4.56495 9.80204Z" fill="%23D2D3D4"/></svg>'); }
.c-style .dataTables_wrapper .q-datatable.dataTable thead > tr > th.sorting_asc span::after,
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th.sorting_asc span::after,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th.sorting_asc span::after { background-image: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.43505 0.197958L7.86578 3.06991C8.17515 3.43441 7.91629 4 7.43015 4H2.56867C2.08884 4 1.82367 3.44069 2.13304 3.06991L4.56377 0.197958C4.79106 -0.0659857 5.20776 -0.0659857 5.43505 0.197958Z" fill="%23545555"/><path d="M4.56495 9.80204L2.13422 6.93009C1.82485 6.56559 2.08371 6 2.56985 6H7.43133C7.91116 6 8.17633 6.55931 7.86696 6.93009L5.43623 9.80204C5.20894 10.066 4.79224 10.066 4.56495 9.80204Z" fill="%23D2D3D4"/></svg>'); }
.c-style .dataTables_wrapper .q-datatable.dataTable thead > tr > th.sorting_desc span::after,
.c-style .dataTables_wrapper .dataTables_scrollHead .q-datatable.dataTable thead > tr > th.sorting_desc span::after,
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th.sorting_desc span::after{ background-image: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.43505 0.197958L7.86578 3.06991C8.17515 3.43441 7.91629 4 7.43015 4H2.56867C2.08884 4 1.82367 3.44069 2.13304 3.06991L4.56377 0.197958C4.79106 -0.0659857 5.20776 -0.0659857 5.43505 0.197958Z" fill="%23D2D3D4"/><path d="M4.56495 9.80204L2.13422 6.93009C1.82485 6.56559 2.08371 6 2.56985 6H7.43133C7.91116 6 8.17633 6.55931 7.86696 6.93009L5.43623 9.80204C5.20894 10.066 4.79224 10.066 4.56495 9.80204Z" fill="%23545555"/></svg>'); }
.c-style .q-datatable.dataTable .c-uploadfile-group { max-width: 180px; }
.c-style .q-datatable-btngroup { justify-content: flex-end; }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable .q-datatable-btngroup .btn { border: 1px solid var(--secondary-border); }
.c-datalayout-card .c-accordion-card .q-datatable.dataTable td { --table-font-body: var(--typo-body-lg); }
.c-style .q-datatable.dataTable .c-progress-group .c-progress-value { font: var(--table-font-body); }

.c-style .c-datatable-label { display: none; font: var(--typo-body-md); color: #888888; }

.c-style .dataTables_wrapper .c-datatable-thgroup { display: flex; gap: 2px; }
.c-style .dataTables_wrapper .c-datatable-th-text { font: var(--typo-body-sm); color: var(--grey); margin-top: 2px; }
.c-style .dataTables_wrapper .c-datatable-thgroup-content { flex-grow: 1; text-align: left; }
.c-style .dataTables_wrapper .c-datatable-thgroup .btn-tooltips { width: 12px; height: 12px; min-width: 12px; color: var(--grey) !important; margin-top: 3px !important; }

.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.previous { order: -1; margin-left: 0; }
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.next { order: 7; }
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled { background-color: var(--form-control-disabled-bg); color: var(--secondary-border); border: 1px solid var(--secondary-border) !important; }
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled i,
.c-style .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled i { color: var(--secondary-border); }

.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr > td.dataTables_empty { border-radius: 8px !important; }

/* DATATABLES + ACTION */
.c-style .q-datatable-action thead > tr > th.c-datatable-action { max-width: 298px; min-width: 298px; background: linear-gradient(to top, rgba(255, 255, 255, 70%), rgba(255, 255, 255, 70%)) var(--primary) !important }
.c-style .q-datatable-action thead > tr > th.c-datatable-action span { color: var(--primary); filter: brightness(0.7); }
.c-style .q-datatable-action tbody > tr > td { padding-bottom: 12px !important; }
.c-style .q-datatable-action tbody > tr > td.c-datatable-action { background: linear-gradient(to top, rgba(255, 255, 255, 92%), rgba(255, 255, 255, 92%)) var(--primary) !important; max-width: 180px; min-width: 180px;  }
.c-datatable-action-form .btn { margin-top: 4px; }

/* DATATABLE PILLS */
.c-style .q-datatable.q-datatable-pill.dataTable > thead > tr > th, 
.c-style .q-datatable.q-datatable-pill.dataTable > thead > tr > td, 
.c-style .q-datatable.q-datatable-pill.dataTable > tfoot > tr > th, 
.c-style .q-datatable.q-datatable-pill.dataTable > tfoot > tr > td { background: transparent; border: 0 !important; padding-top: 12px !important; padding-bottom: 0px !important; position: sticky; top: 0; background-color: var(--background-body) !important; white-space: nowrap; }
.c-style .q-datatable.q-datatable-pill.dataTable > thead > tr > th, 
.c-style .q-datatable.q-datatable-pill.dataTable > thead > tr > td { font: var(--typo-bold-body-md); z-index: 2; }
.c-style .q-datatable.q-datatable-pill { border-spacing: 0 12px; border: 0 !important; overflow: visible; border-radius: 0 !important; }
.c-style .q-datatable.q-datatable-pill tbody tr { box-shadow: none; border-radius: 8px; }
.c-style .q-datatable.q-datatable-pill tbody tr.active { position: relative; z-index: 2; }
.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr > td { background-color: #FFFFFF; border: 0 !important; padding-top: 12px; padding-bottom: 12px; height: 32px; vertical-align: middle !important; }
.q-datatable.q-datatable-pill > tbody > tr > td:first-child { min-width: 200px; border-radius: 8px 0 0 8px !important; border-left: 1px solid #E3E6E8; border-top: 1px solid #E3E6E8 !important; }
.q-datatable.q-datatable-pill > tbody > tr > td:first-child[style*="none"] + td { border-radius: 8px 0 0 8px !important; border-left: 1px solid #E3E6E8;}
.c-style .q-datatable.q-datatable-pill > tbody > tr > td:last-child { border-radius: 0 8px 8px 0 !important; border-right: 1px solid #E3E6E8; }
.c-style .c-datatable-pill-wrapper.dataTables_wrapper .dataTables_scrollHead { margin-bottom: -12px; z-index: 1; }
.c-style .dataTables_scrollHead .q-datatable.q-datatable-pill { border-spacing: 0; }
.c-style .c-datatable-pill-wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { margin-bottom: -12px; }
.c-style .q-datatable .c-ellipsis-2-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead { position: relative; }
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable thead > tr > th::before { content: ''; display: block; width: calc(100% + 8px); background-color: var(--background-body); opacity: 1; height: calc(100% + 8px); top: 0; left: -4px; position: absolute; }

.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable td.dtfc-fixed-right:last-child:before { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z" fill="%23F0F3F8"/></svg>'); background-repeat: no-repeat; background-size: contain; background-position: top right; content: ''; width: 8px; height: 8px; display: block; position: absolute; top: 0; right: 0; }
.c-style .dataTables_wrapper .q-datatable.q-datatable-pill.dataTable td.dtfc-fixed-right:last-child:after { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z" fill="%23F0F3F8"/></svg>'); background-repeat: no-repeat; background-size: contain; background-position: top right; content: ''; width: 8px; height: 8px; display: block; position: absolute; bottom: 0; right: 0; transform: rotate(90deg); }
.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr > td.period,
.c-style .q-datatable.q-datatable-pill.dataTable > tbody > tr > td.docStat { white-space: nowrap; }

.form-control-numberic { min-width: 64px; max-width: 64px; }

/* USERS */
.c-users { display: flex; gap: 8px; align-items: center; overflow: hidden; }
.c-users-avatar { width: 32px; height: 32px; }
.c-users-avatar img { width: 100%; height: 100%; border: 1px solid #D8D8D880; }
.c-users-content { flex-grow: 1; overflow: hidden; }
.c-users-title { font: var(--typo-bold-body-lg); color: var(--default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-users-text { font: var(--typo-body-md); color: var(--text); }

/* EMPTY STATE */
.c-content-emptystate { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; }
.c-content-emptystate img { width: 100px; height: 100px; }
.c-content-emptystate-title { margin-top: 16px; font: var(--typo-bold-body-xl); color: var(--default); }
.c-content-emptystate-text { margin-top: 8px; color: var(--text); }
.c-content-emptystate .btn { margin-top: 16px !important; align-self: center !important; }

.c-style .form-group-collapse { margin-top: 16px; transition: none !important; }
.c-style .form-group-collapse .c-card { padding: 0 !important; box-shadow: none !important; margin: 0; }

/* POPOVER */
.c-popover.popover { --color: #ffffff; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12); border: 0; max-width: 200px; }
.c-popover .popover-body { padding: 4px 8px; font: var(--typo-body-lg); z-index: 2; position: relative; background: var(--color); border-radius: 6px; }
.c-popover.popover.popover-dark { --color: #424242; background: var(--color); }
.c-popover.popover.popover-dark .popover-body { color: #FFFFFF; }
.c-popover.popover .arrow { width: 9px; height: 7px; margin: 0; display: flex; justify-content: center; z-index: 1; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12); }
.c-popover.popover .arrow::before { content: '\e948'; font-family: 'pms-ico'; border: 0; font-size: 9px; color: var(--color); }
.c-popover.popover .arrow::after { display: none; }
.c-popover.popover.bs-popover-bottom .arrow::before { transform: rotate(180deg); }

.c-list-heading { margin-bottom: 16px; }
.c-list-heading-btngroup { display: flex; gap: 16px; }

/* EMPTY STATE */
.c-emptystate { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 120px 24px; position: relative; z-index: 1; text-align: center; }
.c-emptystate-ico { width: 120px; height: 120px; background-size: cover; display: block; margin-bottom: 16px; }
.c-emptystate-title { font: var(--typo-bold-body-xl); }
.c-emptystate-text { margin-top: 8px; font: var(--typo-body-lg); color: var(--text); }
.c-emptystate-text:empty { display: none; }
.c-emptystate .btn { margin-top: 16px; }
.c-emptystate.container-sm { max-width: 560px !important; }

.c-itemlistnone .c-emptystate.c-emptystate-white-sm,
.c-emptystate.c-emptystate-white-sm { padding-top: 28px; padding-bottom: 28px; background-color: #ffffff; border-radius: 8px;}
.c-emptystate.c-emptystate-white-sm .c-emptystate-ico { width: 80px; height: 80px; margin-bottom: 12px;}
.c-emptystate.c-emptystate-white-sm .c-emptystate-title { font: var(--typo-bold-body-lg); color: #545555;}

.HN .c-emptystate:not(.c-emptystate-nocard) { padding-top: 28px; padding-bottom: 28px; border-radius: 8px; background: #FFF; margin-top: 4px; }
.c-board-report .HN .c-emptystate.c-emptystate-nocard { padding: 0; padding-bottom: 24px; width: 100%; }
.c-page-intro { overflow: auto; max-width: 100% !important; height: 100%; }

.c-page-intro-widget { display: none; }
.b-board-column .b-header-widget[style*=none] ~ .c-page-intro-widget[style*="block"] { display: block !important; }

/* Move ICON to load later */

/* CONVERSATION POSTS */
.c-conversation-post { margin-top: 8px; padding: 12px; border: 1px solid var(--color-line); border-radius: 8px; }
.c-conversation-post .c-users + .form-control { margin-top: 12px; padding: 0; border: 0; min-height: 80px; max-height: 80px; box-shadow: none !important; background: none !important; } 
.c-conversation-post hr { margin: 12px 0; }
.c-conversation-post .c-uploadfile-item + .c-uploadfile-item { margin-top: 6px; } 
.c-uploadfile-group { margin-top: 12px; }
.c-conversation-post .c-conversation-post-action { display: flex; gap: 16px; }
.c-conversation-post:focus-within { border-color: var(--text); }

/* POSTS */
.c-posts-items { margin-top: 20px; border-top: 1px solid var(--color-line); padding-top: 20px; }
.c-posts-items:not([style*=none]) + .c-posts-items { border-top: 1px solid var(--color-line); padding-top: 20px; }
.c-posts-action { margin-top: 16px; display: flex; gap: 12px; }
.c-posts-content { margin-top: 16px; }
.c-posts-file { margin-top: 16px; max-width: 260px; }
.c-posts-file[style*="none"] + .c-posts-file { margin-top: 16px; }
.c-posts-file + .c-posts-file { margin-top: 6px; }
.c-posts-file .c-uploadfile-item { align-items: center; }
.c-posts-file .c-uploadfile-item .c-uploadfile-fileico:before { display: none; }

/* TEXT GROUP + LABEL */
.c-text-group { display: flex; gap: 8px 48px; }
.col-form-label + .c-text-group { margin-top: 12px; }

/* CUSTOM : MILESTONE MODAL */
.c-style .c-modal .c-datatable-milestone { margin-top: 24px; }
.c-style .c-modal .c-datatable-milestone .form-control:not([data-provide="datetimepicker"]) { min-width: 130px; max-width: 130px;}
.c-style .c-modal .c-datatable-milestone textarea.form-control { min-width: 224px !important; max-width: unset !important;}
.c-style .c-modal .c-datatable-milestone .input-group.q-input-group-datepicker{ min-width: 130px; }
.c-style .c-modal .c-datatable-milestone .form-control[data-fld="typeTitle"]{ min-width: 100px; }
.c-style .c-modal .c-datatable-milestone .c-uploadfile-group { min-width: 180px; }
.c-style .c-modal .c-datatable-milestone th { min-width: unset !important; }
.c-style .c-modal .c-datatable-milestone .q-datatable.dataTable > tbody > tr > th, .c-style .q-datatable.dataTable > tbody > tr > td,
.c-style .c-modal .c-datatable-milestone .q-datatable.dataTable > tbody > tr > td:first-child{ padding: 12px 10px;}
.c-style .c-modal .c-datatable-milestone .dataTables_scrollHeadInner { min-width: 100%; }
.c-style .c-modal .c-datatable-milestone .q-datatable.dataTable > tbody > tr > td { vertical-align: middle !important; }

/* CUSTOM : SUMMARY MODAL */
.modal.c-modal.c-modal-summary .modal-body { padding: 20px; }
.c-modal-summary-heading { margin: 40px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.c-modal-summary-heading i { font-size: 56px; margin: 0 0 12px 0; display: block; color: rgba(97, 211, 156, 0.80); }
.c-modal-summary-txt { font: var(--typo-bold-body-xl); }
.modal.c-modal.c-modal-summary .c-card,
.modal.c-modal.modalAction31Sum .c-card { background: linear-gradient(to top, rgba(255, 255, 255, 92%), rgba(255, 255, 255, 92%)) var(--primary); border-radius: 8px !important; box-shadow: none !important; }
.modal.c-modal.c-modal-summary .c-card .card-body,
.modal.c-modal.modalAction31Sum .c-card .card-body { padding: 12px !important; }
.modal.c-modal.c-modal-summary .c-card .col-form-label,
.modal.c-modal.modalAction31Sum .c-card .col-form-label { color: var(--primary); filter: brightness(0.7); }
.c-modal-summary-card-heading { margin-bottom: 16px; font: var(--typo-bold-body-lg); }

.c-modal-summary-label { margin-top: 8px; }

.c-style .btn.collapse:not(.show) { display: none; }
.c-content-emptystate { transform: none !important; transition: none !important; }
.c-content-emptystate .c-emptystate-ico { margin: 0; }
.c-content-emptystate.collapsing,
.c-content-form.collapsing { display: none; }
.c-content-form { transform: none !important; transition: none !important; }

/* Customize Style */
.c-list-heading-btngroup .MyAction.dropdown-menu { min-width: 320px; max-height: 300px; }

#modalAction2SUP .modal-content,
#modalAction2PEER .modal-content,
#modalAction2SUB .modal-content  { min-height: 372px; }

#modalAction3 .modal-content,
#modalAction31 .modal-content,
#modalAction311 .modal-content,
#modalAction32 .modal-content,
#modalAction324 .modal-content { min-height: 322px; }

/* Reset Qbic to Coding */
.c-page-body-list { --table-header-color: var(--text); }
.c-page-body-list .q-table-row.q-table-header,
.c-page-body-list .q-table-row.q-table-header .q-table-col,
.c-page-body-list .q-table-row.q-table-header::after,
.c-page-body-list .q-table-row.q-table-header::before { background-color: var(--background-body); }

.c-bg-grey .c-page-body-list .q-table-row.q-table-header,
.c-bg-grey .c-page-body-list .q-table-row.q-table-header .q-table-col,
.c-bg-grey .c-page-body-list .q-table-row.q-table-header::after,
.c-bg-grey .c-page-body-list .q-table-row.q-table-header::before { background-color: var(--background-home); }

.c-page-body-list .q-table-row-group { border: 0; box-shadow: none; border-radius: 8px; }
.c-page-body-list .q-table-row .q-table-col { font: var(--table-font-body) }
.c-page-body-list .q-table-row .q-table-col, 
.c-page-body-list .q-table-row .q-box-mockup { padding: 12px 12px; }
.c-page-body-list .q-table-row.q-table-header .q-table-col { font: var(--typo-bold-body-md); padding: 12px 12px 8px; }
.c-page-body-list .q-table-row { margin-top: 12px; margin-bottom: 0; }
.c-page-body-list .q-table-row.active { z-index: 9; position: relative; }
.c-page-body-list .HF + .q-table-row { margin-top: 4px; }
.c-page-body-list .q-table-row.q-table-header { margin-top: 0; }
.c-page-body-list .q-table-col-group { padding-left: 0; padding-right: 0; }
.c-page-body-list .q-table { margin-bottom: 12px; }
.c-page-body-list .d-table-col-action { margin-left: auto; padding: 0; }
.c-page-body-list .d-table-col-action .btn-link { font: var(--table-font-body) }

/* set width column column [createdate/updatedate] */
.q-table .q-table-row .q-table-col.q-table-createdate,
.q-table .q-table-row .q-table-col.q-table-updatedate { min-width: 130px; max-width: 130px;}
.q-table .q-table-row .q-table-col.q-table-point { min-width: 100px; max-width: 100px;}
.q-table .q-table-row .q-table-col.q-table-soursetype { min-width: 150px; max-width: 150px;}

.c-page-body-list .q-table-col.q-table-col-fixed-right.q-table-groupaction:before { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z" fill="%23F0F3F8"/></svg>'); background-repeat: no-repeat; background-size: contain; background-position: top right; content: ''; width: 8px; height: 8px; display: block; position: absolute; top: 0; right: 0; }
.c-page-body-list .q-table-col.q-table-col-fixed-right.q-table-groupaction:after { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z" fill="%23F0F3F8"/></svg>'); background-repeat: no-repeat; background-size: contain; background-position: top right; content: ''; width: 8px; height: 8px; display: block; position: absolute; bottom: 0; right: 0; transform: rotate(90deg); }

.c-page-body-list .btnShowMore { margin-top: 16px; }
.c-page-body-list .c-tablediv .btnShowMore { margin-top: 16px; margin-bottom: 16px; min-height: 75px; position: relative; display: table-row; height: 75px; }
.c-page-body-list .btnShowMore > .c-loadmore-container { position: absolute; width: 100%; height: 100%; padding: 16px 0;; }
.c-page-body-list .c-loading-ico { width: 40px; height: 40px; } 

.c-style.q-page[layer="2"] .q-title-page { padding-top: 32px; padding-bottom: 16px; padding-left: 0; padding-right: 0; }
.c-itemlistnone { border: 0 !important; }
.c-itemlistnone .c-emptystate { padding-top: calc(120px - 12px); }

.b-board .b-board-column .c-emptystate { padding-top: 0; padding-bottom: 24px; padding-left: 0; padding-right: 0; }
.b-board .b-board-column .c-emptystate .c-emptystate-ico { width: 100px; height: 100px; margin-bottom: 12px; }
.b-board .b-board-column .c-emptystate .c-emptystate-title { font: var(--typo-bold-body-md); color: var(--text); }
.b-board .b-board-column .c-emptystate .c-emptystate-text { font: var(--typo-body-md); margin-top: 2px; color: var(--grey); }

.c-page-body-list .q-table-row .q-table-col .fld_badgeIcon { display: flex; margin-right: 12px; }
.c-page-body-list .q-table-row .q-table-col .q-table-fldmedia { margin: 0; width: auto; min-width: auto; max-width: unset; padding: 0; }
.c-page-body-list .q-table-row .q-table-col .q-table-fldmedia img  { width: 32px; height: 32px; margin-right: 12px; margin-left: 0; border-radius: 50%; }
.c-page-body-list .q-table-row .q-table-col.q-table-fldmedia.q-table-fldmedia-circle img { border-color: #D7DADC; width: 40px; min-width: 40px; height: 40px; min-height: 40px; margin-left: 0; border-radius: 50%; }
.c-page-body-list .q-table-row .q-table-col.q-table-fldmedia.q-table-fldmedia-circle { max-width: 52px; min-width: 52px; padding-right: 0; }
.c-style .q-table .q-table-groupaction .dropdown-menu { width: max-content;}

.c-modal .d-theme-color ul { overflow: unset; }
.c-modal .d-theme-color ul li { padding: 0 8px 5px !important; margin: 0 !important; width: 40px; min-width: 40px; border-bottom-width: 3px !important; }
.c-modal .d-theme-color ul li .d-color { border: 0 !important; width: 24px; height: 24px; border-radius: 6px; }
.c-modal .d-theme-color ul li .d-color span { width: 24px; height: 24px; }
.c-modal .d-theme-color ul li + li { margin-left: 16px; }
.c-modal .d-icon-achievement { border: 2px solid #EFF2F4; background-color: #EFF2F4; } 
.c-modal .d-icon-achievement.active,
.c-modal .d-icon-achievement.active:hover { border: 2px solid #545555; }
.c-modal .d-icon-achievement.active .d-icon-check { display: none; }
.c-modal .d-icon-achievement:hover { border: 2px solid var(--color-line); }
.c-modal .tab-pane.fade.active { opacity: 1; }

.c-style .form-group .d-select-icon { gap: 12px }
.c-gap-12 { gap: 12px !important; }
.c-row-gap-6 { row-gap: 6px !important; }

.c-autoreward-content .custom-control.custom-checkbox { margin-top: 9px; }
.q-datatable.q-datatable-pill:not(.dataTable) { border-collapse: separate; }
.q-datatable.q-datatable-pill:not(.dataTable) > tbody > tr { box-shadow: none; }
.q-datatable.q-datatable-pill:not(.dataTable) > tbody > tr > td { border: 0 !important; border-top: 1px solid var(--color-line) !important; border-bottom: 1px solid var(--color-line) !important; padding: 6px 12px; }
.q-datatable.q-datatable-pill:not(.dataTable) > tbody > tr > td:first-child { border-left: 1px solid var(--color-line) !important; }
.q-datatable.q-datatable-pill:not(.dataTable) > tbody > tr > td:last-child { border-right: 1px solid var(--color-line) !important; }

.c-reward-currentbalance { border-radius: 8px; color: var(--primary); padding: 12px 16px 8px; display: flex; gap: 16px; align-items: center; justify-content: space-between; text-align: left; background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 80%)) var(--primary); margin-bottom: 16px; }
.c-reward-currentbalance-label { color: var(--default); font: var(--typo-body-md); }
.c-reward-currentbalance-text { font-size: 1.725rem; font-weight: bold; gap: 4px; display: flex; }
.c-reward-currentbalance .btn.btnPageLink { margin: 0; align-self: center; }

.c-redeempoint-list { margin-top: 16px; }
.c-redeempoint-listitem + .c-redeempoint-listitem { margin-top: 32px; }
.c-redeempoint-group + .c-redeempoint-title { margin-top: 28px; }
.c-redeempoint-title { margin-bottom: 12px; font: var(--typo-bold-body-xl); }

.c-redeempoint-listitem-item { border: 0; box-shadow: none; padding: 12px; border-radius: 8px; display: flex; align-items: center; gap: 16px; background: #FFFFFF; }
.c-redeempoint-listitem-item + .c-redeempoint-listitem-item { margin-top: 12px; }
.c-redeempoint-img { width: 64px; min-width: 64px; height: 64px; min-height: 64px; }
.c-redeempoint-img img { width: 100%; height: 100%; border-radius: 6px; border: 1px solid var(--color-line); /*object-fit: contain;*/ object-position: center; }
.c-redeempoint-action { margin-left: auto; }
.c-redeempoint-action .btn { --btn-sm-minwidth: 80px; }
.c-reward-text { color: var(--text); }
.c-redeempoint-text { max-width: 440px; overflow: hidden; }
.c-redeempoint-listitem-item.disabled .c-redeempoint-text { color: var(--grey); }

.c-separator { width: 1px; display: block; background-color: var(--color-line); height: 20px; }

.c-file-upload-list { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; border-radius: 6px; border: 1px solid #E3E6E8; padding: 8px; max-width: 214px; cursor: pointer;} 
.c-file-upload-list-preview-ico { width: 20px; text-align: center; font-size: 20px; display: flex; align-items: center; justify-content: center;} 
.c-file-upload-list-name { border: 0; background: #ffffff; text-align: left; font: var(--typo-body-md); padding: 0; }

/* icon type file */
[data-mime*="application/pdf"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e92e';color: #F06860;}
[data-mime*="text/plain"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e962'; color: #545555; }
[data-mime*="application/vnd.ms-powerpoint"] .c-file-upload-list-preview-ico i.c-ico-h-11::before,
[data-mime*="application/vnd.openxmlformats-officedocument.presentationml.presentation"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e92d'; color: #ED7948; }
[data-mime*="application/vnd.ms-excel"] .c-file-upload-list-preview-ico i.c-ico-h-11::before,
[data-mime*="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e92c'; color: #53BA77; }
[data-mime*="application/vnd.openxmlformats-officedocument.wordprocessingml.document"] .c-file-upload-list-preview-ico i.c-ico-h-11::before,
[data-mime*="application/msword"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e92f'; color: #2E7FFA; }
[data-mime*="application/zip"] .c-file-upload-list-preview-ico i.c-ico-h-11::before,
[data-mime*="application/x-7z-compressed"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e92a'; color: #545555; }
[data-mime*="audio"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e929'; color: #9563E7; }
[data-mime="text/html"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e92b'; color: #545555;}
[data-mime*="image"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e927'; color: #9563E7;}
[data-mime*="video"] .c-file-upload-list-preview-ico i.c-ico-h-11::before { content: '\e928'; color: #9563E7;}



/* reset skeleton qbic*/
.c-style .q-qbic-skeleton-table {
	--q-qbic-skeleton: 56px;
	--q-skeleton-padding-img: 20px;
	--q-skeleton-card: linear-gradient(to bottom, transparent 100%, transparent 0%);
	--q-skeleton-card-height: 340px;
	--q-skeleton-img: linear-gradient(to bottom, transparent 100%, transparent 0%);
	--q-skeleton-img-size-height: calc(var(--q-qbic-skeleton) - var(--q-skeleton-padding-img));
	--q-skeleton-img-size-width: 100px;
	--q-skeleton-img-position: 10px center;
	--q-skeleton-line: linear-gradient(to bottom, #EFF2F4 100%, transparent 0%);
	--q-skeleton-line-transparent: linear-gradient(to bottom, transparent 100%, transparent 0%);
	--q-skeleton-line-height: 12px;
	--q-skeleton-line-gap: 16px;
	--q-skeleton-line-1-width: calc(100% - var(--q-skeleton-line-3-width) - var(--q-skeleton-line-2-width) - calc(var(--q-skeleton-line-gap)* 4));
	--q-skeleton-line-1-position: var(--q-skeleton-line-gap) center;
	--q-skeleton-line-2-width: 200px;
	--q-skeleton-line-2-position: right calc(var(--q-skeleton-line-3-width) + calc(var(--q-skeleton-line-gap)* 2)) center;
	--q-skeleton-line-3-width: 200px;
	--q-skeleton-line-3-position: right var(--q-skeleton-line-gap) center;
	--q-blur-width: 200px;
	--q-blur-size: var(--q-blur-width) var(--q-skeleton-card-height);
	position: relative;
	width: 100%;
	z-index: 12;
	background: transparent;
}
.c-style .q-qbic-skeleton-table .q-skeleton-card:empty::after{ border-radius: 8px; box-shadow: none; border: 0;}
.c-style .q-qbic-skeleton-table .q-skeleton-card.q-skeleton-header:empty::after{box-shadow: 0px 0px 6px 0px transparent; height: 38px;}

.b-board .b-board-column .c-page-competencyrating .q-info-page { overflow: unset }
.b-board .b-board-column .c-page-competencyrating .container,
.b-board .b-board-column .c-page-competencyrating .c-content-body { padding: 0; }
.b-board .b-board-column .c-page-competencyrating .divChartDataSet { flex: 0 0 100%; width: 100%; max-width: 100%; }
.b-board .b-board-column .c-page-competencyrating .c-card { overflow: unset; border-radius: unset; box-shadow: none !important; }
.b-board .b-board-column .c-page-competencyrating .card-body { padding: 0 !important; }
.b-board .b-board-column .c-page-competencyrating .c-card .row { margin: 0; }
.b-board .b-board-column .c-page-competencyrating .c-card .row > div[class*="col-"] { padding: 0; }

.c-page-competencyrating .HX { position: absolute; width: 100%; }
.b-board .b-board-column .widgetItem .HX.text-center { display: flex; min-height: 200px;}

.divBoard .b-board-column .widgetItem .container { padding: 0;}

.c-editor-clearfix *:not(i):not(.c-content-emptystate-title) { background: transparent !important; font-family: var(--font-family-body) !important; margin: 0 !important; padding: 0 !important; }

.c-style ::-webkit-scrollbar { width: unset; height: unset }

.c-style .b-board.container > .divItemList { width: 1%; }

.c-box-list .title { font: var(--typo-page-subtitle); min-height: 32px; display: flex; align-items: center; margin-bottom: 12px; }

.c-style .c-todo-heading ~ .c-content-group .dataTables_scrollHead { top: var(--line-top-inbox); }
.c-style .c-todo-heading ~ .c-content-group #todo-reviewandsubmit .dataTables_scrollHead,
.c-style .c-todo-heading ~ .c-content-group #tab-listview .dataTables_scrollHead { top: 0; }

.c-minw-200 { min-width: 200px; }

/* POPOVER */
[data-toggle="popover"] { cursor: pointer !important; }
.popover { border-radius: 8px; background: #FFFFFF; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08); border: 0; max-width: 380px; width: 100%; }
.popover .popover-body { padding: 12px; color: var(--default); }
.popover .arrow { display: none; }

.c-popover-relateto-title { margin-bottom: 4px; } 
.c-popover-relateto-card { border-radius: 8px; background: #FAFAFA; padding: 8px; margin-top: 8px; }
.c-popover-relateto-card-item { display: flex; align-items: baseline; gap: 8px; }
.c-popover-relateto-card-item + .c-popover-relateto-card-item { margin-top: 4px; }
.c-popover-relateto-label { font: var(--typo-bold-body-md); color: var(--text); min-width: 100px; }

.cpegap-info { color: #848586; }
.cpegap-info .cpegap-name { color: var(--text); }

/* SKELETON */
:root {
	--skt-round: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="6" fill="%23E0E6E9"/></svg>');
	--skt-round-darker: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="6" fill="%23E0E6E9"/></svg>');
	--skt-col-w: 200px;
	--skt-col-h: 20px;
	--skt-btn: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="6" fill="%23E0E6E9"/></svg>');
	--skt-btn-darker: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="6" fill="%23E0E6E9"/></svg>');
	--skt-btn-w: 110px;
	--skt-btn-h: 32px;
	--skt-col-gap-size: 20px;
	--skt-avatar: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="20" fill="%23E0E6E9"/></svg>');
	--skt-avatar-w: 40px;
	--skt-avatar-h: 40px;
	--skt-col-gap-size: 50px;

	--skt-thead-header-h: 34px;
	--skt-header-h: 18px;
	--skt-row-h: 56px;

	--skt-square: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="0" fill="%23E0E6E9"/></svg>');
	--skt-round-border: url('data:image/svg+xml,<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" rx="10" fill="%23E0E6E9"/><rect x="0.5" y="0.5" width="99%" height="99%" rx="9.5" stroke="%23D7DADC" stroke-opacity="0.5"/></svg>');
}

.c-skeleton { --color-line: #E0E6E9; position: relative; z-index: 12; margin-top: 0; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

@keyframes loading-skeleton-table {
	to { background-position: 300% 0; }
}
@keyframes pulse {
	50% { opacity: 0.5; }
}

/* SKELETON : Skeleton Animate */
.c-skeleton:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;
	background-image: linear-gradient(90deg,
			rgba(51, 51, 51, 0) 0,
			rgb(247 249 250 / 60%) 50%,
			rgba(51, 51, 51, 0) 100%); background-size: 200px 340px; background-position: -100% 0; background-repeat: no-repeat; animation: loading-skeleton-table 1.9s infinite linear; visibility: hidden; }

/* SKELETON : List Header */
.c-skeleton-header { display: block; width: 100%; padding: 0 12px; min-height: var(--skt-header-h); --skt-col-h: 18px; --skt-btn-h: 18px; margin-bottom: 12px; margin-top: 8px; }
.c-skeleton-header::after { content: ''; width: 100%; display: block; min-height: var(--skt-header-h); }
.c-skeleton-list-avatar .c-skeleton-header::after {
	background: 
		var(--skt-avatar), 
		var(--skt-round), 
		var(--skt-round),
		var(--skt-btn);
	background-size: 
		0 0,
		10%,
		calc(var(--skt-col-w) / 2) var(--skt-col-h),
		0 0;
	background-position: 
		0 center, 
		calc(var(--skt-col-gap-size) + var(--skt-avatar-w)) center, 
		right calc(calc(var(--skt-col-gap-size) * 1) + calc(var(--skt-btn-w) * 1) + calc(var(--skt-col-w) / 2)) center, 
		right 0 center;
	background-repeat: no-repeat;
}
.c-skeleton-list:not(.c-skeleton-list-avatar) .c-skeleton-header::after {
	background: 
		var(--skt-round), 
		var(--skt-round), 
		var(--skt-round),
		var(--skt-btn);
	background-size: 
		10%,
		calc(var(--skt-col-w) / 2) var(--skt-col-h),
		calc(var(--skt-col-w) / 2) var(--skt-col-h),
		0 0;
	background-position: 
		0 center,
		right calc(calc(var(--skt-col-gap-size) * 2) + calc(var(--skt-col-w) * 1) + calc(var(--skt-btn-w) * 1) + calc(var(--skt-col-w) / 2)) center, 
		right calc(calc(var(--skt-col-gap-size) * 1) + calc(var(--skt-btn-w) * 1) + calc(var(--skt-col-w) / 2)) center, 
		right 0 center;
	background-repeat: no-repeat;
}

/* SKELETON : Row */
.c-skeleton-row::after { content: ''; width: 100%; display: block; min-height: var(--skt-row-h); }
.c-skeleton-list .c-skeleton-row { background-color: #FFFFFF; /*box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);*/ border-radius: 6px; }
.c-skeleton-row { min-height: var(--skt-row-h); display: flex; align-items: center; width: 100%; padding: 0 12px; }
.c-skeleton-row + .c-skeleton-row { margin-top: 12px; }
.c-skeleton-list-avatar .c-skeleton-row::after {
	background: 
		var(--skt-avatar), 
		var(--skt-round), 
		var(--skt-round), 
		var(--skt-btn);
	background-size: 
		var(--skt-avatar-w) var(--skt-avatar-h),
		calc(100% - (var(--skt-col-gap-size) * 3) - calc(var(--skt-col-w) * 1) - var(--skt-avatar-w) - calc(var(--skt-btn-w) * 1)) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h),
		var(--skt-btn-w) var(--skt-btn-h);
	background-position: 
		0 center, 
		calc(var(--skt-col-gap-size) + var(--skt-avatar-w)) center, 
		right calc(calc(var(--skt-col-gap-size) * 1) + calc(var(--skt-btn-w) * 1)) center, 
		right 0 center;
	background-repeat: no-repeat;
}
.c-skeleton-list:not(.c-skeleton-list-avatar) .c-skeleton-row::after {
	background: 
		var(--skt-round), 
		var(--skt-round), 
		var(--skt-round), 
		var(--skt-btn);
	background-size:
		calc(100% - (var(--skt-col-gap-size) * 3) - calc(var(--skt-col-w) * 2) - var(--skt-btn-w)) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h), 
		var(--skt-btn-w) var(--skt-btn-h);
	background-position: 
		0 center,
		right calc(calc(var(--skt-col-gap-size) * 2) + calc(var(--skt-col-w) * 1) + var(--skt-btn-w)) center, 
		right calc(calc(var(--skt-col-gap-size) * 1) + var(--skt-btn-w)) center, 
		right 0 center;
	background-repeat: no-repeat;
}

/* SKELETON : Table */
.c-skeleton-table { --skt-row-h: 40px; --skt-header-h: 42px; --skt-col-w: 80px; }
.c-skeleton-table .c-skeleton-header { border: 1px solid var(--color-line); border-bottom: 2px solid var(--color-line); border-radius: 8px 8px 0 0; background: #FFFFFF; height: var(--skt-thead-header-h); margin: 0; }
.c-skeleton-table .c-skeleton-row { background-color: #FFFFFF; border: 1px solid var(--color-line); border-bottom: 0; margin: 0; }
.c-skeleton-table .c-skeleton-row:last-child { border-radius: 0 0 8px 8px; border-bottom: 1px solid var(--color-line); }
.c-skeleton-table .c-skeleton-header + .c-skeleton-row { border-top: 0; }
.c-skeleton-table .c-skeleton-header::after {
	background: 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker),
		var(--skt-round-darker);
	background-size: 
		10% var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h) !important;
}
.c-skeleton-table .c-skeleton-row::after {
	background: 
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-round);
}
.c-skeleton-table .c-skeleton-header::after,
.c-skeleton-table .c-skeleton-row::after {
	background-size:
		calc(100% - (var(--skt-col-gap-size) * 5) - calc(var(--skt-col-w) * 5)) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h), 
		var(--skt-col-w) var(--skt-col-h);
	background-position: 
		0 center,
		right calc(calc(var(--skt-col-gap-size) * 4) + calc(var(--skt-col-w) * 4)) center, 
		right calc(calc(var(--skt-col-gap-size) * 3) + calc(var(--skt-col-w) * 3)) center, 
		right calc(calc(var(--skt-col-gap-size) * 2) + calc(var(--skt-col-w) * 2)) center, 
		right calc(calc(var(--skt-col-gap-size) * 1) + var(--skt-col-w)) center, 
		right 0 center;
	background-repeat: no-repeat;
}

.c-skeleton-table-sm { --skt-col-w: 160px; }
.c-skeleton-table-sm .c-skeleton-header::after {
	background: 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker);
	background-size: 
		10% var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h) !important;
}
.c-skeleton-table-sm .c-skeleton-row::after {
	background: 
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-round);
}
.c-skeleton-table-sm .c-skeleton-header::after,
.c-skeleton-table-sm .c-skeleton-row::after {
	background-size:
	calc(100% - (var(--skt-col-gap-size) * 3) - calc(var(--skt-col-w) * 3)) var(--skt-col-h), 
	var(--skt-col-w) var(--skt-col-h), 
	var(--skt-col-w) var(--skt-col-h),
	var(--skt-col-w) var(--skt-col-h);
	background-position: 
		0 center,
		right calc(calc(var(--skt-col-gap-size) * 2) + calc(var(--skt-col-w) * 2)) center, 
		right calc(calc(var(--skt-col-gap-size) * 1) + var(--skt-col-w)) center, 
		right 0 center;
	background-repeat: no-repeat;
}

.c-skeleton-table-button { --skt-col-w: 100px; }
.c-skeleton-table-button .c-skeleton-header::after {
	background: 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-round-darker), 
		var(--skt-btn-darker);
	background-size: 
		10% var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		0 0 !important;
}
.c-skeleton-table-button .c-skeleton-row::after {
	background: 
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-round),
		var(--skt-btn);
}
.c-skeleton-table-button .c-skeleton-header::after,
.c-skeleton-table-button .c-skeleton-row::after {
	background-size: 
		calc(100% - (var(--skt-col-gap-size) * 5) - calc(var(--skt-col-w) * 4) - var(--skt-btn-w)) var(--skt-col-h), 
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-col-w)) var(--skt-col-h),
		calc(var(--skt-btn-w)) var(--skt-btn-h);
	background-position: 
		0 center,
		right calc(calc(var(--skt-col-gap-size) * 4) + calc(var(--skt-col-w) * 3) + var(--skt-btn-w)) center,
		right calc(calc(var(--skt-col-gap-size) * 3) + calc(var(--skt-col-w) * 2) + var(--skt-btn-w)) center,
		right calc(calc(var(--skt-col-gap-size) * 2) + calc(var(--skt-col-w) * 1) + var(--skt-btn-w)) center,
		right calc(calc(var(--skt-col-gap-size) * 1) + var(--skt-btn-w)) center, 
		right 0 center;
	background-repeat: no-repeat;
}
.c-skeleton-widget { padding: 8px 0; }
.c-skeleton-custom-widget-header { --skt-row-h: 20px; margin-bottom: 4px; }
.c-skeleton-custom-widget-header .c-skeleton-row::after { min-height: var(--skt-row-h); background: var(--skt-round), var(--skt-round); background-size: min(45%, 280px) var(--skt-col-h), min(20%, 80px) var(--skt-col-h); background-position: left center, right center; background-repeat: no-repeat; }
.c-skeleton-custom-widget-announcement { --skt-row-h: 84px; --skt-col-w: 372px; padding: 20px 0; --skt-img-w: 112px; }
.c-skeleton-custom-widget-announcement + .c-skeleton-custom-widget-announcement { border-top: 1px solid #EFF2F4; }
.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) var(--skt-row-h), 
					min(60%, 373px) var(--skt-col-h), 
					20% var(--skt-col-h),
					1px var(--skt-col-h),
					20% var(--skt-col-h);
	background-position: 
					left center, 
					calc(var(--skt-img-w) + 20px) top, 
					calc(var(--skt-img-w) + 20px) calc(var(--skt-col-h) + 8px), 
						calc(var(--skt-img-w) + 20px + 20% + 8px) calc(var(--skt-col-h) + 8px), 
					calc(var(--skt-img-w) + 20px + 25% + 8px + 8px) calc(var(--skt-col-h) + 8px);
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-announcement { --skt-row-h: 84px; --skt-col-w: 372px; padding: 20px 0; --skt-img-w: 112px; }
.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) var(--skt-row-h), 
					min(60%, 373px) var(--skt-col-h), 
					20% var(--skt-col-h),
					1px var(--skt-col-h),
					20% var(--skt-col-h);
	background-position: 
					left center, 
					calc(var(--skt-img-w) + 20px) top, 
					calc(var(--skt-img-w) + 20px) calc(var(--skt-col-h) + 8px), 
						calc(var(--skt-img-w) + 20px + 20% + 8px) calc(var(--skt-col-h) + 8px), 
					calc(var(--skt-img-w) + 20px + 25% + 8px + 8px) calc(var(--skt-col-h) + 8px);
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-group { padding-top: 16px; display: flex; gap: 20px; }
.c-skeleton-custom-widget-mycourse { --skt-row-h: 227px; --skt-col-h: 20px; --skt-img-w: 112px; width: 100%; border: 1px solid #E3E6E8; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.c-skeleton-custom-widget-mycourse .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: 
				var(--skt-square), 
				var(--skt-round), 
				var(--skt-round), 
				var(--skt-round);
	background-size: 
					100% 117px, 
					min(calc(100% - 20px), 174px) var(--skt-col-h), 
					min(40%, 100px) 18px,
					min(20%, 54px) 18px;
	background-position: 
					left top, 
					10px calc(117px + 8px), 
					10px calc(117px + var(--skt-col-h) + 8px * 2),
					10px calc(100% - 6px);
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-mylearningpath { --skt-row-h: 86px; --skt-col-h: 20px; --skt-img-w: 112px; border: 1px solid #E3E6E8; padding: 16px; border-radius: 8px; margin-top: 16px; background: #FFFFFF; }
.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), 
				var(--skt-round);
	background-size: 
					150px 100%, 
					min(calc(100% - 150px - 95px - 46px), 324px) var(--skt-col-h), 
					min(calc(100% - 150px - 54px - 46px), 349px) 8px,
					min(40%, 92px) 28px,
					min(calc(100% - 20px), 95px) var(--skt-col-h), 
					min(20%, 54px) 18px;
	background-position: 
					left top, 
					calc(150px + 16px) 0, 
					calc(150px + 16px) calc(var(--skt-col-h) + 12px),
					calc(150px + 16px) bottom,
					right top,
					right calc(var(--skt-col-h) + 6px);
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-inbox { --skt-row-h: 48px; --skt-col-h: 20px; padding-top: 20px; }
.c-skeleton-custom-widget-inbox + .c-skeleton-custom-widget-inbox { border-top: 1px solid #E3E6E8; margin-top: 20px; }
.c-skeleton-custom-widget-inbox .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: 
				var(--skt-round), 
				var(--skt-round);
	background-size: 
					77px var(--skt-col-h), 
					120px var(--skt-col-h);
	background-position: 
					left top, 
					left bottom;
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-rewardheader { --skt-row-h: 20px; margin-bottom: 4px; }
.c-skeleton-custom-widget-rewardheader .c-skeleton-row::after { min-height: var(--skt-row-h); background: var(--skt-round); background-size: min(100%, 162px) var(--skt-col-h); background-position: left center; background-repeat: no-repeat; }
.c-skeleton-custom-widget-rewardpoint { --skt-row-h: 26px; --skt-col-h: 26px; margin-top: 24px; padding: 16px 12px; border: 1px solid #E3E6E8; border-radius: 8px; background: #FFFFFF; }
.c-skeleton-custom-widget-rewardpoint .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: var(--skt-round), var(--skt-round);
	background-size: 
					min(calc(100% - 80px - 20px), 124px) var(--skt-col-h),
					min(100%, 80px) var(--skt-col-h);
	background-position: 
						left center,
						right center;
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-allreward { --skt-row-h: 20px; margin-top: 20px; }
.c-skeleton-custom-widget-allreward .c-skeleton-row::after { min-height: var(--skt-row-h); background: var(--skt-round); background-size: min(100%, 182px) var(--skt-col-h); background-position: left center; background-repeat: no-repeat; }
.c-skeleton-custom-widget-reward { --skt-row-h: 62px; --skt-col-h: 20px; padding: 8px; border: 1px solid #E3E6E8; border-radius: 8px; margin-top: 12px; background: #FFFFFF; }
.c-skeleton-custom-widget-reward .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: 
				var(--skt-round), 
				var(--skt-round), 
				var(--skt-round);
	background-size: 
					62px 62px, 
					min(calc(100% - 62px - 8px), 182px) var(--skt-col-h), 
					min(calc(100% - 120px - 8px), 120px) 18px;
	background-position: 
					left top, 
					calc(62px + 8px) top, 
					calc(62px + 8px) calc(var(--skt-col-h) + 8px);
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-appheader { --skt-row-h: 20px; margin-bottom: 16px; }
.c-skeleton-custom-widget-appheader .c-skeleton-row::after { min-height: var(--skt-row-h); background: var(--skt-round); background-size: min(100%, 162px) var(--skt-col-h); background-position: left center; background-repeat: no-repeat; }
.c-skeleton-custom-widget-app { --skt-row-h: 100px; --skt-col-h: 18px; --skt-avatar-w: 56px; --skt-avatar-h: 56px; display: flex; gap: 8px 16px; justify-content: space-between; }
.c-skeleton-custom-widget-app .c-skeleton-row { width: 33.33%; margin-top: 8px; }
.c-skeleton-custom-widget-app .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: 
				var(--skt-avatar),
				var(--skt-round);
	background-size: 
					var(--skt-avatar-w) var(--skt-avatar-h),
					min(100%, 79px) var(--skt-col-h);
	background-position: 
					center top,
					center calc(56px + 8px);
	background-repeat: no-repeat;
}
.c-skeleton-custom-widget-viewall { --skt-row-h: 26px; --skt-col-h: 26px; margin-top: 16px; }
.c-skeleton-custom-widget-viewall .c-skeleton-row::after { min-height: var(--skt-row-h); background: var(--skt-round); background-size: min(100%, 79px) var(--skt-col-h); background-position: center center; background-repeat: no-repeat; }
.c-skeleton-announcement-view { --skt-row-h: 254px; --skt-col-h: 24px; --skt-avatar-w: 20px; --skt-avatar-h: 20px; padding-top: 24px; max-width: 608px; width: 100%; margin: 0 auto; }
.c-skeleton-announcement-view .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: 
				var(--skt-round),
				var(--skt-avatar),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round);
	background-size: 
					100% 26px,
					var(--skt-avatar-w) var(--skt-avatar-h),
					116px 20px,
					1px 20px,
					116px 20px,
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					50% var(--skt-col-h);
	background-position: 
					left top,
					left calc(var(--skt-col-h) + 8px),
					calc(var(--skt-avatar-w) + 8px) calc(26px + 8px),
					calc(var(--skt-avatar-w) + (8px * 2) + 116px) calc(26px + 8px),
					calc(var(--skt-avatar-w) + (8px * 3) + 116px) calc(26px + 8px),
					left calc(26px + 8px + var(--skt-avatar-h) + 16px),
					left calc(26px + var(--skt-col-h) + 8px + var(--skt-avatar-h) + 16px + 8px),
					left calc(26px + (var(--skt-col-h) * 1) + 8px + var(--skt-avatar-h) + 16px + (8px * 1)),
					left calc(26px + (var(--skt-col-h) * 2) + 8px + var(--skt-avatar-h) + 16px + (8px * 2)),
					left calc(26px + (var(--skt-col-h) * 3) + 8px + var(--skt-avatar-h) + 16px + (8px * 3)),
					left calc(26px + (var(--skt-col-h) * 4) + 8px + var(--skt-avatar-h) + 16px + (8px * 4));
	background-repeat: no-repeat;
}

.c-skeleton.c-skeleton-announcement-view-action { --skt-row-h: 32px; --skt-col-h: 32px; padding: 12px; border-top: 1px solid #E3E6E8; margin: 0 -24px; width: calc(100% + 48px); margin-top: auto; }
.c-skeleton-announcement-view-action .c-skeleton-row { max-width: 608px; margin: 0 auto; }
.c-skeleton-announcement-view-action .c-skeleton-row::after { min-height: var(--skt-row-h); background: var(--skt-round); background-size:  156px var(--skt-col-h); background-position: left top; background-repeat: no-repeat; }
.c-skeleton-survey-view { --skt-row-h: 254px; --skt-col-h: 24px; --skt-avatar-w: 20px; --skt-avatar-h: 20px; padding-top: 0; max-width: 888px; width: 100%; margin: 0 auto; }
.c-skeleton-survey-view .c-skeleton-row::after {
	min-height: var(--skt-row-h);
	background: 
				var(--skt-round),
				var(--skt-avatar),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round),
				var(--skt-round);
	background-size: 
					100% 26px,
					var(--skt-avatar-w) var(--skt-avatar-h),
					116px 20px,
					1px 20px,
					116px 20px,
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					100% var(--skt-col-h),
					50% var(--skt-col-h);
	background-position: 
					left top,
					left calc(var(--skt-col-h) + 8px),
					calc(var(--skt-avatar-w) + 8px) calc(26px + 8px),
					calc(var(--skt-avatar-w) + (8px * 2) + 116px) calc(26px + 8px),
					calc(var(--skt-avatar-w) + (8px * 3) + 116px) calc(26px + 8px),
					left calc(26px + 8px + var(--skt-avatar-h) + 16px),
					left calc(26px + var(--skt-col-h) + 8px + var(--skt-avatar-h) + 16px + 8px),
					left calc(26px + (var(--skt-col-h) * 1) + 8px + var(--skt-avatar-h) + 16px + (8px * 1)),
					left calc(26px + (var(--skt-col-h) * 2) + 8px + var(--skt-avatar-h) + 16px + (8px * 2)),
					left calc(26px + (var(--skt-col-h) * 3) + 8px + var(--skt-avatar-h) + 16px + (8px * 3)),
					left calc(26px + (var(--skt-col-h) * 4) + 8px + var(--skt-avatar-h) + 16px + (8px * 4));
	background-repeat: no-repeat;
}

.c-page-content.HM { flex-grow: 1; }

#todo-competencies .c-card,
#todo-questions .c-card { box-shadow: none !important; border-radius: 0; }
#todo-competencies .c-card .card-header:not(.c-accordion-card-header),
#todo-questions .c-card .card-header:not(.c-accordion-card-header) { padding: 0 !important; background: transparent; border-radius: 0; }
#todo-competencies .c-card .card-body,
#todo-questions .c-card .card-body { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-top: 12px !important; }

.divTab .divTopic + .divTopic { padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--color-line) !important; }

.c-style .btn.c-btn-moredetail-show { padding: 0; text-decoration: underline !important; font-weight: normal; height: auto; }

.c-style .spinner-border { color: var(--primary); margin: auto; width: 40px; height: 40px; border-right-color: #F5F5F5; }
.c-style .btn .spinner-border { color: inherit; width: 1rem; height: 1rem; }
.c-spinner-hx { min-height: 200px; position: absolute; width: 100%; display: flex; overflow: hidden; } 

.c-btn-grid i { width: 60px; height: 60px; margin: 0 auto; }
[class^="c-icoduo-"]::before,
[class*=" c-icoduo-"]::before { content: ''; display: block; width: 100%; height: 100%; color: transparent; /*visibility: visible;*/ opacity: 1; background-size: contain; background-position: center; background-repeat: no-repeat; }


/* Move ICON to load later */


.c-content-heading ~ .c-card + .c-card { border-top: 1px solid var(--color-line) !important; padding-top: 24px; }
.c-card + .c-card.divDetail { border-top: 1px solid #D9D9D9 !important; margin-top: 24px; padding-top: 24px; }

.q-empty-text-only { padding: 16px; font: var(--typo-body-md); display: block; text-align: center; }

/* ---------------------------------------------------------------------------------------- */
/* CSS - Onboarding */
.c-onboard { 
	--c-onboard-gap: 24px;
}
.c-data-file img { width: 50px; height: 50px; }  

.c-onboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--c-onboard-gap); grid-template-rows: 1fr min-content; width: 100%; margin: 16px auto; align-items: flex-start;}
.c-onboard-right, 
.c-onboard-left { display: grid; gap: var(--c-onboard-gap);}
.c-column-onboard { border-radius: 12px; background: #ffffff; min-width: 0;}

.c-title-column-onboard { color: #131313; font: var(--typo-page-subtitle); display: block; padding: 16px 20px; }
.c-title-column-onboard .btn { height: auto;}
.c-content-column-onboard { padding: 0 20px 16px;}
.c-content-column-onboard .HI:focus-visible { outline: 0;}
.c-bg-borad-user { border-radius: 12px; padding: 12px 16px; background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--color-qcolor3);  }
.c-user-onboard { display: grid; grid-template-columns: minmax(36px, auto) 1fr; gap: 12px; }
.c-user-onboard-photo { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(216, 216, 216, 0.5); position: relative;}
.c-user-onboard-photo img { width: 100%; aspect-ratio: 1 / 1;}
.c-user-onboard-info { overflow: hidden;}
.c-user-onboard-title { font: var(--typo-bold-body-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.c-user-onboard-subtitle { font: var(--typo-body-md); color: #888888; margin-top: 2px;}
.c-user-onboard-email { display: flex; align-items: flex-start; color: #131313; margin-top: 6px; font: var(--typo-body-md); word-break: break-all;}
.c-user-onboard-email i { margin-right: 8px; font: var(--typo-body-md); line-height: 20px;}
.c-onboard-message { margin-top: 12px;}
.c-onboard-message:empty { display: none;}

.c-people-to-meet,
.c-people-contact,
.c-people-connection { display: grid; grid-template-columns: 1fr 1fr; word-break: break-word; gap: 8px; }
[class*="c-people"] .c-user-onboard { padding: 4px; border-radius: 8px; overflow: hidden;}
[class*="c-people"] .c-user-onboard:hover { background-color: #F7F8F9;}

.c-people-connection .c-user-onboard { padding: 8px;}

.popover.popover-contact { max-width: 280px; z-index: 1; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);}
.c-popover-body { padding: 12px; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10); border-radius: 12px; width: 260px;}
.c-user-onboard-popover { padding: 12px 12px 10px; background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--color-qcolor3); border-radius: 8px; }
.c-popover-group-btn { display: flex; justify-content: space-evenly; margin-top: 8px;}
.c-popover-btn { padding: 8px 4px; border-radius: 8px; width: 80px; border: 0; color: #848586; background: #ffffff; cursor: pointer; font-size: 12px; display: flex; flex-direction: column;}
.c-popover-btn span { white-space: pre-wrap; display: block; width: 100%;}
.c-popover-btn:hover { background-color: #F7F8F9;}
.c-popover-btn .c-border-blue { border: 1px solid #386BF6; border-radius: 50%; overflow: hidden; color: #386BF6; margin: 0 auto 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px;}

.popover.popover-contact .arrow { position: absolute; display: block; width: 1rem; height: .5rem; margin: 0 .3rem; }
.popover.popover-contact .arrow::after, 
.popover.popover-contact .arrow::before { position: absolute; display: block; content: ""; border-style: solid; }
.bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before { bottom: 0; border-width: .5rem .5rem 0; border-top-color:#f1f1f1; }
.bs-popover-auto[x-placement^=top]>.arrow::after,
.bs-popover-top>.arrow::after { bottom: 1px; border-width: .5rem .5rem 0; border-top-color: #ffffff; }
.bs-popover-auto[x-placement^=bottom]>.arrow::before,
.bs-popover-bottom>.arrow::before { top: 0; border-width: 0 .5rem .5rem .5rem; border-bottom-color:#f1f1f1; }
.bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after { top: 1px; border-width: 0 .5rem .5rem .5rem; border-bottom-color: #ffffff; }

.c-list-getting { display: block; word-break: break-all; padding: var(--gap-card-item) 0; border-top: 1px solid var(--color-line); cursor: pointer;}
.c-list-getting:hover { color: #888888;}
.c-content-column-onboard .HI:nth-child(2) .c-list-getting { padding-top: 0; border-top: 0; }
.c-content-column-onboard .HI:nth-last-child(4) .c-list-getting { padding-bottom: 0;}
.c-list-getting-name { font: var(--typo-bold-body-lg); }
.c-list-getting-username { font: var(--typo-body-lg); }
.c-list-getting-date { font: var(--typo-body-md); color:#858687; margin-top: 4px; }
.c-list-getting-message { font: var(--typo-body-lg); margin-top: 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.c-list-getting-message * { all: unset; }

.c-course-learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.c-course-learn-item .card-img-top img { height: 117px;}
.c-course-learn-item .card-body { padding: 6px 10px;}
.c-course-learn-item .c-count-progress { margin-top: auto; font: var(--typo-body-md); color: #545555;}
.c-course-learn-item .card-text-list li { padding: 0; color: #131313; align-items: baseline; }
.c-course-learn-item .card-text-list li i { font-size: 12px;}
.c-course-learn-item .card-text-list li.c-course-overdue { color: #D52700;}

/* move css announcement form engageschedannounce/engagemyannounce */

/* content left */
.b-announce-widget .btn-link-title { padding: 0; font: var(--typo-bold-body-lg); }
.b-announce-widget .btn-link-title i { font-size: 10px; margin-left: 4px;}
.b-announce-widget .btn-link-title:hover { color: #888888;}
.b-widget-item .b-hide-widget { display: none;}
.b-announce-point { background: linear-gradient(to top, rgba(255, 255, 255, 95%), rgba(255, 255, 255, 95%)) var(--color-qcolor3); padding: 16px 8px 16px 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px;}
.b-announce .btn.btn-xs { height: 20px;}
.c-myannounce-listitem-item { box-shadow: none; display: flex; gap: 20px; position: relative; align-items: flex-start;}
.c-myannounce-listitem-item + .c-myannounce-listitem-item { margin-top: var(--gap-card-item); border-top: 1px solid var(--color-line); padding-top: var(--gap-card-item); }
.c-myannounce-content { flex-grow: 1; /*overflow: hidden;*/ display: grid; position: relative; /*grid-template-columns: 1fr auto;*/ gap: 8px 20px; }
.c-myannounce-content-left { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; overflow: hidden; }
.c-myannounce-content-left > .q-ellipsis { display: none;} /* hide description announcement */

.c-myannounce-listitem-item:hover { color: var(--grey); }
.c-myannounce-listitem-item:hover img { transform: scale(1.04); transition: all 0.2s; }

.c-myannounce-heading-group { display: flex; align-items: center; overflow: hidden; justify-content: space-between; gap: 20px; }
.c-myannounce-heading-group .c-myannounce-heading { min-width: 0; }
.c-myannounce-content-left .q-ellipsis:has(span[data-fld="message"]:empty) { display: none; }

/* .c-myannounce-content-right { min-width: 114px; } */
.c-myannounce-content-right {order: -1;}
.HI[show-acktime="1"] .c-myannounce-content-right {order: 1;}
.c-tag-acknowledge { display: flex; align-items: center; } 
.c-tag-acknowledge span[class^="lbl"] { display: none;}
[data-noack="0"] .c-tag-acknowledge { background-color: #E3E6E8; padding: 1px 8px; border-radius: 6px; color: #888888; gap: 10px;}
[data-noack="0"] .c-tag-acknowledge span[class^="lbl"] { display: block;}

.c-myannounce-heading { display: flex; gap: 8px; align-items: baseline; }
.c-myannounce-heading .pinnedIcon { position: absolute; top: 0; margin-left: -32px; background: #4E5B7E; color: #ffffff; border-radius: 50%; box-shadow: 0 2.4px 2.4px 0 rgba(0, 0, 0, 0.15); border: 2px solid #ffffff; }
.c-myannounce-heading .pinnedIcon i { width: 20px; height: 20px; min-width: 20px; font-size: 10px; display: flex; align-items: center; justify-content: center; color:  #ffffff}
.c-myannounce-title { font: var(--typo-bold-body-lg); }
.c-myannounce-correspondent { display: flex; align-items: center; }
.c-myannounce-img { width: 112px; min-width: 112px; height: 84px; min-height: 84px; border-radius: 8px; border: 1px solid var(--color-line); overflow: hidden; }
.c-myannounce-img img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
.c-myannounce-img[data-ctype="I"] img { object-fit: cover; object-position: center; }
[data-ctype="I"] .c-myannounce-img img { object-fit: cover; object-position: center; }
.c-correspondent-profile { width: 20px; height: 20px; min-width: 20px; margin-right: 8px; display: flex;}
.c-correspondent-profile img { width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--color-line); }
.c-correspondent-heading-text { color: var(--grey); font: var(--typo-body-md); display: flex; align-items: center; gap: 8px; overflow: hidden; }
.c-correspondent-heading-text .c-separate { height: 18px; }

.c-myannounce-filecount { border: 1px solid var(--color-line); border-radius: 6px; padding: 5px 8px; max-width: 200px; width: 100%; gap: 8px; display: flex; align-items: center; font: var(--typo-body-md); }
.c-myannounce-filecount i { color: var(--grey); }

.c-myannounce-acknowledgetime { display: flex; gap: 8px; align-items: center; overflow: hidden; color: var(--grey); font: var(--typo-body-md); flex-wrap: wrap; }
.c-myannounce-acknowledgetime i { font-size: 10px; }

/* .c-myannounce-info { max-width: 140px; min-width: 140px; overflow: hidden; text-align: right; } */

.divActionRequired,
.c-style .c-action-required { line-height: 1; }
.c-style .divActionRequired .c-badge,
#p24 .c-style .divActionRequired .c-badge,
.c-style .c-action-required .c-badge { --badge-color: rgba(255, 134, 66, 0.20); --badge-text: #F66638; max-width: 100%; font: var(--typo-bold-body-sm); height: 20px; display: inline-flex; align-items: center; border-radius: 4px; }
.c-style .c-action-required { flex-wrap: wrap;}
.action-required { display: none;}
.c-style .c-action-required .action-required { display: block; margin-right: auto;}
.c-style .c-action-required .b-header-widget-name { order: 3; width: 100%;}

[icon="announce:1"] .c-myannounce-img img { content: url('/p/p4294967373/rsc/announcement-img1.svg'); }
[icon="announce:2"] .c-myannounce-img img { content: url('/p/p4294967373/rsc/announcement-img2.svg'); }
[icon="announce:3"] .c-myannounce-img img { content: url('/p/p4294967373/rsc/announcement-img3.svg'); }
[icon="announce:4"] .c-myannounce-img img { content: url('/p/p4294967373/rsc/announcement-img4.svg'); }
[icon="announcesurvey:10"] .c-myannounce-img img { content: url('/p/p4294967373/rsc/announcement-survey.svg'); }
[icon="announceonboarding"] .c-myannounce-img img { content: url('/p/p4294967373/rsc/announcement-onboarding.svg'); } /* Onboarding */

.c-myannounce-listgroup .c-myannounce-listitem-item { padding: 24px 48px; border-radius: 12px; background: #FFFFFF; }
.c-myannounce-listgroup .c-myannounce-listitem-item + .c-myannounce-listitem-item { border: 0; }
.c-myannounce-listgroup .c-myannounce-img { width: 150px; min-width: 150px; height: 112px; min-height: 112px; }
.c-myannounce-listgroup .c-myannounce-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; white-space: normal; }


/* ------ strat My Connections ------ */
.c-badge-group { display: grid; grid-template-columns: repeat(5 , 1fr); gap: 12px;}
.c-badge-item { border-radius: 8px; height: 118px;  box-shadow: inset 0 0 0 1px #E3E6E8;}
.c-badge-item:hover { box-shadow: inset 0 0 0 2px #E3E6E8;}
.c-badge-item.active { box-shadow: inset 0 0 0 2px #545455;}
.c-badge-item .c-select-badge { padding: 12px 8px 8px; text-align: center; height: 100%;}
.c-badge-item .c-badge-icon { width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.c-badge-item .c-badge-icon.fld_badgeImg img { width: 100%; height: 100%;}
.c-badge-item .c-badge-icon.fld_badgeIcon i[class^="d-iconimg-badge-"] { transform: scale(1.125);}
.c-badge-item .c-badge-title { font: var(--typo-body-md);}


/* ------ strat My Connections Inbox ------ */
.c-todo-heading-avatar img,
.c-userflow-avatar img { border-radius: 50%;}

.c-content-feedback { max-width: 608px; margin: 0 auto; }
.c-feedback-date { display: grid; grid-template-columns: minmax(165px, auto) 1fr; gap: 16px; font: var(--typo-body-md); color: #131313; margin-bottom: 2px;}
.c-feedback-date label { margin: 0; color: #545555; font: var(--typo-bold-body-md);}

.c-count-question { margin-top: 14px; margin-bottom: 16px; font: var(--typo-body-md); color: #545555;}
.c-feedback-group { display: grid; grid-template-columns: 1fr; gap: 24px; }
.c-card-question,
.c-recognition { border-radius: 12px; background: #ffffff; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08); padding: 20px; }
.c-recognition { margin-top: 20px;}

.c-feedback-question { margin-bottom: 20px;}
.c-question-no { font: var(--typo-bold-body-lg); color: #131313; margin-bottom: 4px; }
.c-feedback-content .c-text-feedback { font: var(--typo-bold-body-lg); color: #131313; margin-bottom: 8px;}
.q-style .c-feedback-content textarea.form-control { min-height: 104px; padding: 12px;}
.divAction { display: flex; gap: 16px; }

.c-recognition-badge-icon { display: flex; align-items: center;}
.c-recognition-badge-icon i[class*="d-iconimg-badge-"] { transform: scale(0.875); margin-right: 12px; margin-left: 0;}
.c-recognition-badge-icon.c-icon-img img { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin-right: 12px;}

/* ------ strat Announcement post detail ------ */
.c-post-detail { max-width: 816px; margin: 0 auto; padding-top: 24px; }
.c-post-detail .c-card .card-body { padding: 0 !important; } /* padding: 24px 20px 32px !important; */
.c-content-post-detail { max-width: 608px; width: 100%; margin: 0 auto; overflow: auto; }
.c-content-grid-detail { display: grid; gap: 16px 0; grid-auto-columns: minmax(0, 1fr); margin-top: 16px;} 
.c-content-grid-detail .endPost:empty { display: none;}
.c-content-grid-detail .divText .fldText { white-space: pre-wrap; overflow-wrap: normal; }
.ItemAnnounce:not([annid]) .c-content-post-detail .divTitle.c-myannounce-heading { display: none;}
[page="p/p4294967373/EngageMyAnnounceView"] .c-form-footer .container { max-width: 608px !important; margin: 0 auto; }
.c-post-detail .c-myannounce-heading { align-items: baseline; margin-bottom: 10px; flex-direction: column; }
.c-post-detail .c-myannounce-heading .pinnedIcon { position: relative; margin-left: 0; border: 0; border-radius: 4px; box-shadow: none; font-size: 10px; font-weight: bold;} 
/* .c-post-detail .divActionRequired { margin-bottom: 8px;} */
.c-post-detail .c-myannounce-title { font: var(--typo-page-title); color: var(--primary); filter: brightness(0.7);}
.c-post-detail .c-myannounce-filecount { border: 0; padding: 2px 0; color: var(--grey); margin-top: 4px;}
.c-post-detail .c-myannounce-filecount i { width: 20px; text-align: center; }
.c-post-detail .c-pin-view-detail { display: flex; align-items: center; padding: 2px 6px; gap: 4px; height: 20px;}
.c-post-detail .c-myannounce-heading .pinnedIcon i { font-size: 10px; width: auto; height: auto; min-width: auto;}
.whenShow { color: var(--grey); font: var(--typo-body-md);}
.whenShow:empty { display: none !important;}

.c-slide { background-color: #ffffff; border-radius: 8px; border: 1px solid rgba(215, 218, 220, 0.50); }
.carousel-control,
.carousel-control:hover { color: #ffffff; font-size: 16px;}
.c-slide .icon-prev,
.c-slide .icon-next { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: rgb(19 19 19 / 50%); border-radius: 50%; position: absolute; top: calc(50% - 20px);}
.c-slide .icon-prev { left: 12px;}
.c-slide .icon-next { right: 12px;}
.c-slide .icon-prev:hover,
.c-slide .icon-next:hover { background-color: rgb(19 19 19 / 70%);}
.c-slide .carousel-indicators { height: 10px; bottom: 16px; border-radius: 10px; background-color: rgb(19 19 19 / 50%); padding: 2px 4px; gap: 5px;}
.c-slide .carousel-indicators li { width: 4px; height: 4px; }
.c-slide .carousel-indicators li.active { width: 6px; height: 6px;}
.c-slide[data-count="1"] .carousel-indicators, 
.c-slide[data-count="1"] .carousel-control { display: none;}
/* icon play */
.c-slide .carousel-item .c-btn-play { width: 48px; height: 48px; cursor: pointer;}
.c-slide .carousel-item .c-btn-play img { width: 48px; height: 49px !important; }
.c-slide .carousel-item[type*="video"] .c-btn-play { display: block !important; top: calc(50% - 24px); left: calc(50% - 24px); position: relative;}

.c-post-detail-typefile { display: grid; gap: 8px;}
.c-myannounce-location,
.c-myannounce-link { border: 1px solid var(--color-line); border-radius: 6px; padding: 8px; max-width: 300px; width: 100%; gap: 8px; display: flex; align-items: center; font: var(--typo-body-md); }
.c-myannounce-location i,
.c-myannounce-link i { color: #888888; font-size: 20px;}

[noack="1"] .c-form-footer .btnPageSave.btn.btn-primary { border: 1px solid var(--primary); color: var(--primary); background: #ffffff;}
[noack="1"] .c-form-footer .btnPageSave.btn.btn-primary:hover { background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--primary) !important; color: var(--primary);}
[noack="1"] .c-form-footer .btnPageSave.btn-primary[disabled],
[noack="1"] .c-form-footer .btnPageSave.btn-primary[disabled]:hover,
[noack="1"] .c-form-footer .btnPageSave.btn-primary:not(:disabled):not(.disabled):hover { border-color: var(--disabled); color: var(--disabled-txt); background: #ffffff !important;}


[show-required="0"] .c-form-footer .btnPageSave.btn.btn-outline-primary[disabled]::before { content: '\e91e'; font-size: 10px; font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

.q-preview-file .d-btnsavetodriveaction { display: none !important;}
.q-preview-file .c-toast { z-index: 1051;}
.ItemOnboard { margin-bottom: var(--gap-card-item); padding-bottom: var(--gap-card-item);}


/* edit location from uLife c-modal-announcement-location */
.c-modal-announcement-location.modal.c-modal .modal-body { padding: 0;}
.c-modal-announcement-location.modal.c-modal .modal-body .container-fluid { padding: 0; margin: 0; display: flex; flex-direction: column;}
.c-modal-announcement-location.modal.c-modal .modal-body .row { padding: 0; margin: 0; height: auto;}
.c-modal-announcement-location .modal-content { border: 0; overflow: auto; max-height: 100%; }
.c-modal-announcement-location .d-top-bar { display: flex; align-items: center; flex-direction: row-reverse; padding: 20px !important; width: 100%;}
.c-modal-announcement-location .d-top-bar div { flex-grow: 1;}
.c-modal-announcement-location .d-top-bar .d-pc-hide { display: none;}
.c-modal-announcement-location .d-top-bar .text-center.d-pc-title-df { text-align: left !important; font: var(--typo-page-subtitle);}
.c-modal-announcement-location .d-top-bar .close { display: flex; align-items: center; justify-content: center; color: #545555 !important; opacity: 1; border: 0 !important; right: -8px; top: -8px; position: relative; width: 32px; height: 32px; cursor: pointer;}
.c-modal-announcement-location .d-top-bar .close .icon-closencancel-line,
.c-modal-announcement-location .d-box-search-location .icon-search-line { background: none; font-size: 12px !important; min-width: 12px; width: auto; height: auto; font-family: 'pms-ico' !important;
    speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
.c-modal-announcement-location .d-top-bar .close .icon-closencancel-line::before { content: "\e920" !important;}
.c-modal-announcement-location .row.d-second-layer { flex-grow: 1; overflow: auto; display: block;}
.c-modal-announcement-location .row.d-second-layer > div { padding: 0 20px 20px;}
.c-modal-announcement-location .d-box-search-location { border-radius: 8px !important; border: 1px solid var(--form-control-border) !important; display: flex; align-items: center; margin-bottom: 16px; position: relative;}
.c-modal-announcement-location .d-box-search-location input { background: none !important; font: var(--form-control-font); padding: var(--form-control-padding); padding-left: 0 !important; height: var(--form-control-height) !important;}
.c-modal-announcement-location .d-box-search-location .icon-search-line { display: flex; justify-content: center; width: 40px; color: var(--lookup-option-color);}
.c-modal-announcement-location .d-box-search-location .icon-search-line::before { content: "\e919" !important;}
.c-modal-announcement-location .d-box-search-location .dropdown-menu { top: var(--form-control-height) !important; margin-top: 4px; padding: 0;  border: 1px solid #E3E6E8;
    border-radius: 8px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); filter: none;}
.c-modal-announcement-location .d-box-search-location .dropdown-menu li { padding: 0;}
.c-modal-announcement-location .d-box-search-location .dropdown-menu li  a { display: flex; align-items: center; position: relative; padding: var(--lookup-option-padding); font: var(--dropdown-option-font);}
.c-modal-announcement-location .mapContainer { width: 100%; aspect-ratio: 4 / 3;}
.c-modal-announcement-location .openlayersmap { height: 100%; }
.c-modal-announcement-location .ol-unselectable { height: auto !important;}
.c-modal-announcement-location .ol-overlaycontainer-stopevent,
.c-modal-announcement-location .d-modal-panel-bottom,
.c-modal-announcement-location #infowindow-content { display: none;}

.FILE_VIEW.d-second-layer .d-bar-fixed { padding-left: 0; padding-right: 0;}

/* ------ end Announcement post detail ------ */

/* form onboard config--admin */
.custom-control .btn-tooltips { position: relative; z-index: 1; }

.c-collapse-onboard > .form-group.row { margin-top: 14px;}

/* show people onborad */
[class^="c-people"][data-count="1"] { grid-template-columns: 1fr;}
[class^="c-people"][data-count="2"] { grid-template-columns: repeat(2 , 1fr);}
[class^="c-people"][data-count="3"] { grid-template-columns: repeat(3 , 1fr);}
[class^="c-people"][data-count="4"] { grid-template-columns: repeat(4 , 1fr);}
.c-people-connection[data-count="5"] { grid-template-columns: repeat(5 , 1fr);}

/* TOAST */
.c-toast {position: fixed;top: 24px;left: 50%;right: unset;padding: 0;z-index: 5;transform: translate(-50%, -300%);}
.c-toast .toast:not([class*="d-noti-"]) { display: none !important; opacity: 0 !important; visibility: hidden; }
.c-toast .toast, [data-model*="iPad"] #p24 .c-toast .toast { border-radius: 6px; padding: 10px 40px 10px 16px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); position: relative; border: 0; background: var(--toast-bgcolor); overflow: hidden; color: var(--default); align-items: flex-start; gap: 12px; display: flex; margin: 0; opacity: 1; transition: opacity .15s linear; max-width: 320px; min-width: 320px; min-height: 40px; }
.c-toast .toast:not([style*="none"]) { opacity: 1; display: flex !important; -webkit-animation-name: toastIn; -moz-animation-name: toastIn; -o-animation-name: toastIn; animation-name: toastIn; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; -o-animation-duration: 0.4s; animation-duration: 0.4s; }
.c-toast .toast.status[style*="none"] { display: flex !important; -webkit-animation-name: toastOut; -moz-animation-name: toastOut; -o-animation-name: toastOut; animation-name: toastOut; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; }
.c-toast .toast::before { content: ''; width: 5px; height: 100%; background-color: var(--toast-color); display: block; position: absolute; left: 0; top: 0; }
.c-toast .toast-header,
.c-toast .txtMesg { flex-grow: 1; padding: 0; background: transparent; color: var(--default); border: 0; font: var(--typo-bold-body-md); }
.c-toast .toast::after { font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; order: -1; font-size: 18px; color: var(--toast-color); }
.c-toast .toast.d-noti-info { --toast-color: #4C91F8; --toast-bgcolor: #E6F1FF; }
.c-toast .toast.d-noti-info:after { content: '\e90d'; }
.c-toast .toast.d-noti-done { --toast-color: #61D39C; --toast-bgcolor: #E3FFF0; }
.c-toast .toast.d-noti-done:after { content: '\e90f'; }
.c-toast .toast.d-noti-warn { --toast-color: #FCC26A; --toast-bgcolor: #FFF8E7; }
.c-toast .toast.d-noti-warn:after { content: '\e90c'; }
.c-toast .toast.d-noti-fail { --toast-color: #EC5D55; --toast-bgcolor: #FFF0EF; }
.c-toast .toast.d-noti-fail:after { content: '\e90b'; }
.c-toast .toast.d-noti-export { --toast-color: #4C91F8; --toast-bgcolor: #E6F1FF; }
.c-toast .toast.d-noti-export:after { content: '\e90e'; }
.c-toast .toast.d-noti-import { --toast-color: #4C91F8; --toast-bgcolor: #E6F1FF; }
.c-toast .toast.d-noti-import:after { content: '\e90a'; }
.c-toast .toast .btnDone { display: flex; align-items: center; font-size: 8px; cursor: pointer; font-family: 'pms-ico' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: auto; justify-content: center; width: 32px; height: 32px; top: 4px; right: 0; position: absolute; color: var(--text); }
.c-toast .toast .btnDone:before { content: "\e920"; }
.c-toast .toast .progress { height: 3px; margin-top: 4px; background: #DCDFE4; }
.c-toast .toast .progress .progress-bar { margin-top: 0 !important; height: 100% !important; background: #545555; }
.c-toast .toast .divUploadProgressTxt { font-size: 14px !important; font-weight: normal !important; }

@-webkit-keyframes toastIn { 0% { opacity: 0; transform: translateY(300%); } to { opacity: 1; transform: translateY(300%); } }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(300%); } to { opacity: 1; transform: translateY(300%); } }
@-webkit-keyframes toastOut { 0% { opacity: 1; transform: translateY(300%); } 50% { opacity: 0; transform: translateY(300%); } 100% { opacity: 0; transform: translateY(-300%); } }
@keyframes toastOut { 0% { opacity: 1; transform: translateY(300%); } 50% { opacity: 0; transform: translateY(300%); } 100% { opacity: 0; transform: translateY(-300%); } }


@media(min-width:576px) {
	[class^="c-people"][data-count="1"] .c-user-onboard:not(.c-user-onboard-popover),
	[class^="c-people"][data-count="2"] .c-user-onboard:not(.c-user-onboard-popover),
	[class^="c-people"][data-count="3"] .c-user-onboard:not(.c-user-onboard-popover),
	[class^="c-people"][data-count="4"] .c-user-onboard:not(.c-user-onboard-popover),
	.c-people-connection[data-count="5"] .c-user-onboard:not(.c-user-onboard-popover) { grid-template-columns: 1fr; grid-template-rows: minmax(36px, auto) 1fr; height: 100%; text-align: center; gap: 8px;}

	[class^="c-people"][data-count="1"] :not(.c-user-onboard-popover) .c-user-onboard-photo,
	[class^="c-people"][data-count="2"] :not(.c-user-onboard-popover) .c-user-onboard-photo,
	[class^="c-people"][data-count="3"] :not(.c-user-onboard-popover) .c-user-onboard-photo,
	[class^="c-people"][data-count="4"] :not(.c-user-onboard-popover) .c-user-onboard-photo,
	.c-people-connection[data-count="5"] :not(.c-user-onboard-popover) .c-user-onboard-photo { margin: 0 auto;}

}

@media (min-width: 768px) and (max-width: 1024px) {
	[class^="c-people"][data-count="1"] .c-user-onboard,
	[class^="c-people"][data-count="2"] .c-user-onboard,
	[class^="c-people"][data-count="3"] .c-user-onboard,
	[class^="c-people"][data-count="4"] .c-user-onboard,
	.c-people-connection[data-count="5"] .c-user-onboard { grid-template-columns: minmax(36px, auto) 1fr; gap: 12px; grid-template-rows:unset; text-align: left;}
}

@media(max-width:576px), (min-width: 768px) and (max-width: 1024px) {
	.c-people-to-meet,
	.c-people-contact,
	.c-people-connection,
	/* [class^="c-people"][data-count="1"], */
	[class^="c-people"][data-count="2"],
	[class^="c-people"][data-count="3"],
	[class^="c-people"][data-count="4"],
	.c-people-connection[data-count="5"] { grid-template-columns: 1fr 1fr;}
	[class^="c-people"] .c-user-onboard { padding: 8px 4px;}
}

@media(max-width:380px) {
	.c-people-to-meet,
	.c-people-contact,
	.c-people-connection,
	[class^="c-people"][data-count="1"],
	[class^="c-people"][data-count="2"],
	[class^="c-people"][data-count="3"],
	[class^="c-people"][data-count="4"],
	.c-people-connection[data-count="5"] { grid-template-columns: 1fr;}
}



/* ---------------------------------------------------------------------------------------- */

#modalExpandTextarea .c-content-form { height: 100%; margin-top: 0; display: flex; flex-direction: column; }
#modalExpandTextarea .c-content-form .form-group { flex-grow: 1; display: flex; flex-direction: column; }
#modalExpandTextarea textarea { flex-grow: 1; }

.modal.c-modal.c-modal-loadingdot .modal-body { padding: 40px 20px; }
.c-loadingdot-box { display: flex; justify-content: center; margin-bottom: 32px; }
.c-loadingdot-label { font: var(--typo-body-md); color: var(--text); text-align: center; }
.c-loader-dot { width: 8px; height: 8px; border-radius: 50%; position: relative; animation: c-loader-dot 0.9s ease alternate infinite; animation-delay: 0.36s; top: 14px; margin: -42px auto 0; }
.c-loader-dot::after, .c-loader-dot::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: c-loader-dot 0.9s ease alternate infinite; }
.c-loader-dot::before { left: -16px; animation-delay: 0.18s; }
.c-loader-dot::after { right: -16px; animation-delay: 0.54s; }

@keyframes c-loader-dot {
	0% { box-shadow: 0 28px 0 -28px var(--primary); }
	100% { box-shadow: 0 28px 0 var(--primary); } 
}

.c-spinner-loading { padding: 32px; gap: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text); }

.c-content-tabs { margin-bottom: 20px; margin-top: 4px; }

.c-style .c-page-sidebar .c-indent-listitem-item { --indent-size: 12px; margin-left: var(--indent-size); width: calc(100% - var(--indent-size)); padding: 12px 16px; }

/* ai chat */
.modal-open .tttChatWidget { z-index: 0 !important;}

/* modal */
/* .eUniteApp #p24 .modal.dialogRedeem .modal-dialog .modal-content { height: auto;} */

/* USERS LAYOUT */
.c-user { gap: 12px; display: flex; }
.c-user .c-user-avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.c-user .c-user-avatar img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; /*object-fit: cover; object-position: center;*/ border: 1px solid #D8D8D880; }
.c-user .c-user-content { overflow: hidden; display: flex; flex-direction: column; }
.c-user .c-user-title { font: var(--typo-body-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-user .c-user-text { font: var(--typo-body-md); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.q-datatable-pill .c-user .c-user-content { justify-content: center; }
.q-datatable-pill .c-user .c-user-avatar { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }


/* ------ Global Search ------ */
.divSearch.c-globalsearch-pc { margin: 0; margin-left: 24px; max-width: 320px; width: 100%;}
.c-globalsearch-pc .c-global-search-form { display: flex; flex-wrap: nowrap; --form-control-height: 28px !important; --form-control-bg:#EFF2F4; }
.c-globalsearch-pc .c-global-search-form .txtSearch.form-control { transition: none;}
.c-globalsearch-pc .c-global-search-form form { flex-grow: 1;}
.c-globalsearch-pc .c-global-search-form .input-group-append { position: absolute; right: 0; top: 0; z-index: 4; height: 100%;}
.c-globalsearch-pc .c-global-search-form.c-input-group-search .form-control,
.c-globalsearch-pc .c-global-search-form.c-input-group-search .input-group-prepend .btn { border-color: transparent;}
.c-globalsearch-pc .c-global-search-form.c-input-group-search .input-group-prepend .btn,
.c-globalsearch-pc .c-global-search-form.c-input-group-search .form-control:hover,
.c-globalsearch-pc .c-global-search-form.c-input-group-search .form-control:hover + .input-group-prepend .btn,
.c-globalsearch-pc .c-global-search-form.c-input-group-search:hover .form-control,
.c-globalsearch-pc .c-global-search-form.c-input-group-search .form-control:focus + .input-group-prepend .btn { background: var(--form-control-bg); box-shadow: none;}
.c-globalsearch-pc .c-global-search-form .input-group-prepend { position: absolute; left: 0; top: 0; height: 100%; width: 40px; z-index: 5;}
.c-globalsearch-pc .c-global-search-form .form-control.ui-autocomplete-input { padding-left: 40px !important; border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }

.c-input-search-autocomplete { position: absolute; top: calc(var(--height-header) - 6px); max-width: 320px; width:320px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); border-radius: 8px; border: 1px solid #E3E6E8; background: #ffffff;}
.ui-autocomplete { padding: 0 12px 12px; display: grid ; grid-template-columns: 1fr; gap: 2px; width: 100% !important; max-width: 320px; position: absolute !important; background: #ffffff; max-height: 430px; overflow: auto; top: calc(var(--height-header) + 3px) !important; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); border-radius: 8px; border: 1px solid #E3E6E8; z-index: 1;}
.ui-autocomplete::-webkit-scrollbar-track { -webkit-box-shadow: none; background-color: transparent;}
.ui-autocomplete::-webkit-scrollbar { width: 4px; }
.ui-autocomplete::-webkit-scrollbar-thumb { background: #A7A9AB; border-radius: 12px; }
.ui-autocomplete li { padding-left: 0; padding-right: 0; }
.ui-autocomplete-category { margin-bottom:8px; padding-top: 16px; color: #888888; font: var(--typo-bold-body-lg);}
.ui-autocomplete-category.d-line { border-top: 1px solid #E3E6E8; margin-top: 8px;}
.c-list-autocomplete-group { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font: var(--typo-body-xl); min-height: 44px;}
.c-search-thumbnail-content { display: flex; align-items: center; justify-content: center;}
.c-search-thumbnail-content.c-icon-app i::before { width:20px; height:20px;}
.c-search-thumbnail-employee,
.c-search-thumbnail-employee i::before { width: 28px; height: 28px; 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-sm); color: #545555;}

.modal.c-modal.c-modal-global-search .modal-header { filter: unset;}
.modal.c-modal.c-modal-global-search .modal-header .modal-title { filter: brightness(0.7); }

/* remove transition modal all  */
.c-style .modal,
.c-style .modal .modal-dialog { transition: none; transform: unset;}


.ui-tooltip { position: absolute; z-index: 1; max-width: 200px; padding: 4px 8px; color: #ffffff; text-align: left; border-radius: 6px; background: #424242; font: var(--typo-body-md); }

/* support ipad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	/* Announcement */
	[data-model*="iPad"] .c-myannounce-listitem-item { gap: 12px !important; padding: 12px !important; background-color: #FFFFFF; border-radius: 8px !important; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08) !important; border: 0 !important; }
	[data-model*="iPad"] .c-myannounce-listitem-item .c-myannounce-img { width: 88px !important; min-width: 88px !important; height: 66px !important; min-height: 66px !important; }
	[data-model*="iPad"] .c-myannounce-listitem-item + .c-myannounce-listitem-item { margin-top: 8px !important; }
	[data-model*="iPad"] .c-myannounce-content .c-myannounce-filecount { max-width: 100%; }
	[data-model*="iPad"] .c-myannounce-content { grid-template-columns: 1fr; gap: 6px; }
	[data-model*="iPad"] .c-myannounce-content .c-myannounce-content-left { gap: 6px; }
	[data-model*="iPad"] .c-myannounce-content .c-myannounce-info { min-width: 100%; max-width: 100%; text-align: left; }
	[data-model*="iPad"] .c-myannounce-content .c-correspondent-heading-text { flex-direction: column; gap: 3px; align-items: flex-start; }
	[data-model*="iPad"] .c-myannounce-content .c-correspondent-heading-text .c-ellipsis { width: 100%; }
	[data-model*="iPad"] .c-myannounce-content .c-correspondent-heading-text .c-separate { display: none; }
	[data-model*="iPad"] .c-myannounce-content .c-myannounce-correspondent { align-items: flex-start; }
	[data-model*="iPad"] .c-style .c-myannounce-listitem-item { box-shadow: none !important; }

	/* My course */
	[data-model*="iPad"] .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); }
	[data-model*="iPad"] .b-board .b-board-column .b-widget-item [page="p/wise/QbicMyCourses"] .divItemList.row { grid-auto-columns: clamp(40%, 40%, 20%); grid-auto-flow: column; grid-template-columns: unset;}
	[data-model*="iPad"] [page="p/wise/QbicMyCourses"] .divItemList.row .divCourseItem, 
	[data-model*="iPad"] [page="p/wise/QbicOpenCourses"] .divItemList.row .divCourseItem { padding: 6px}
	[data-model*="iPad"] #p24 .b-widget-item [page="p/wise/QbicMyCourses"] .divItemList.row .divCourseItem { padding: 0;}

	/* My learning paths */
	[data-model*="iPad"] .b-board .b-board-column .q-roadmap-table .q-table-row .q-table-fldmedia { display: none; }
	[data-model*="iPad"] .b-widget-item .q-roadmap-table .q-table-row-group { padding:12px 16px;}
	[data-model*="iPad"] #p24 .b-widget-item [page*="QbicMyRoadmap"] div[class*=col-] { padding: 0;}

	/* survey report */
	[data-model*="iPad"] .b-board .b-board-row-item { width: 100%;}
	[data-model*="iPad"] .divBoard.c-board-report .b-board { flex-direction: column; }
	[data-model*="iPad"] .c-style .b-board.container > .divItemList { flex-direction: column; }
	[data-model*="iPad"] .divBoard .divDrawBox.c-report-filter { order: -1;}
	[data-model*="iPad"] .divBoard.c-board-report .b-board-column { width: 100%;}
	[data-model*="iPad"] .divBoard .divDrawBox.c-report-filter { max-width: 100% !important; flex-direction: row; gap: 12px;}
	[data-model*="iPad"] .c-report-npssurvey .b-board-row-item.c-report-column-right { max-width: 100%;}
	[data-model*="iPad"] .divBoard.c-board-report .divMainBox.b-board .divItemList { width: 100%;}
	[data-model*="iPad"] .b-board .b-box-row-item + .b-box-row-item { flex-direction: column;}
	[data-model*="iPad"] .c-report-npssurvey .b-widget-item.c-report-column-right { max-width: 100%}
	[data-model*="iPad"] .c-npssurvey-htmlbar-bar {max-width: unset;}
	[data-model*="iPad"] .divBoard.c-board-report .divMainBox.b-board > .divItemList { padding: 0 !important;}
	[data-model*="iPad"] .c-npssurvey-htmlbar-group .contentItem { gap: 40px;}
}/* end support ipad */ 


/* t1_file */
/* .t1_file #divPortalXX .pswp { display: none; } */
/* .t1_file #divPortalXX .divdrive-badge-icon-r { float: left; width: 32px; height: 32px; display: grid; align-items: center; text-align: center; } */
.t1_file #divPortalXX .d-top-bar .INFO_DIV { display: none !important; }
.t1_file #divPortalXX .divdrive-badge-icon-r.SAVE_DIV .icon-drive-icon-line::before { display: none; }


/* setting agreement */
.c-coding-agreement .q-table { border: 1px solid #E3E6E8; border-radius: 8px; overflow: auto }
.c-coding-agreement .q-table .q-table-row-group { border: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid #EAEAEA;}
#p24 .c-coding-agreement .q-table .q-table-col-group { padding: 0;}
.c-coding-agreement .q-table-row.q-table-header::before,
.c-coding-agreement .q-table-row.q-table-header::after { display: none;}
.c-coding-agreement .q-table-row.q-table-header .q-table-col { font-weight: bold; border-bottom: 1px solid #EAEAEA; }
.c-coding-agreement .q-table .q-table-row { display: flex; gap: 36px; padding: 0; margin:0;}
.c-coding-agreement .q-table .q-table-row .q-table-col:first-child { flex-grow: 1; max-width: inherit !important; }
.c-coding-agreement .q-table .q-table-row .q-table-col { padding: 12px 16px}
.q-table-row .q-table-col, .q-table-row .q-box-mockup,
.c-coding-agreement .q-table .q-table-row .q-table-createby { max-width: 200px; min-width: 200px; }
.c-coding-agreement .q-table .q-table-fldname .btnItem { color: var(--primary); text-decoration: underline; cursor: pointer;}
.c-coding-agreement .q-myprofile.shadow-sm { box-shadow: none !important;}
.c-coding-agreement .q-myprofile { border-radius: 0;}
.c-coding-agreement .q-myprofile .q-layout-page > .container { padding: 0;}

.c-loading-agreement { position: fixed; width: 100%; height: 100%; z-index: 3; top: calc(var(--c-page-header-height) + var(--height-header)); background: rgba(19, 19, 19, 0.40); display: flex ; align-items: center; justify-content: center;}
.c-loading-agreement .q-empty { border-radius: 12px; background: #ffffff; padding: 32px; max-width: 310px;} 
.c-loading-agreement .q-empty .q-empty-detail { font: var(--typo-body-md); margin: 0;}
.c-style .c-loading-agreement .q-empty .spinner-border { width:32px; height: 32px; margin-bottom: 12px;}
.c-style .c-loading-agreement .q-empty .btn.btnReload { font: var(--btn-xs-font); min-width: 80px; margin-top: 12px;}

/* setting profile */
#p24 .d-hide-euniteapp { display: none;}
#p24 .d-show-euniteapp { display: block;}
#p24 .d-show-euniteapp.btn { display: inline-flex;}
#p24 [page*="QbicMyAccount"] .c-coding-agreement .divNavTab.q-column { margin-top: 16px;}
#p24 [page*="QbicMyAccount"] .c-coding-agreement .q-form-heightpage { min-height: unset; height: 100%; overflow: hidden;}

/* setting report filter (copy bigure) */
.divBoard .divMainBox .divItemList,
.divBoard .divMainBox .c-item-list-filter {
	flex-grow: 1;
}
.divBoard .divDrawBox.c-report-filter[data-toggle="0"] .title,
.divBoard .divDrawBox.c-report-filter[data-toggle="0"] .divItemList,
.divBoard .divDrawBox.c-report-filter[data-toggle="0"] .c-item-list-filter {
	display: none !important;
}
[data-toggle="1"] .c-item-list-filter .btnDrawBoxToggle {
    display: block;
    float: right;
    border: 0;
    margin: 0;
    min-width: auto;
    color: var(--text);
    width: 32px;
    height: 32px;
    padding: 0;
}

.divBoard.c-board-report .c-report-filter[data-toggle="1"] .c-item-list-filter .btnDrawBoxToggle {
	display: flex;
	position: absolute;
	right: 0;
}
.c-board-report .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: 300px;}
.c-modal-progress.modal.c-modal:not(.c-modal-right) .modal-content { max-height: 336px;}
.c-modal-progress.modal.c-modal .modal-body { padding: 32px 0; display: flex; flex-direction: column; gap: 24px; color: #545555; font-size: 12px; line-height: 18px;}
.c-modal-progress .q-uploadfile-uploading { height: auto;}
.c-modal-progress .q-uploadfile-uploading-container { flex-direction: column; gap: 12px;}
.c-modal-progress .q-uploadfile-uploading-percent { order: -1; font-weight: normal; color: #545555; line-height: 18px;}
.c-modal-progress .q-uploadfile-uploading .progress { height: 3px; border-radius: 20px; background: #D2DADF; }
.c-modal-progress .q-uploadfile-uploading .progress-bar { background: #50575D;}
.c-modal-progress .modalTxt { height: 100%; overflow: auto; padding: 0 30px; text-align: center;}
.c-toast .divShowProgress.q-uploadfile-uploading { height: auto;}


/* style report full page  */
.c-style .container.c-container-full-report { max-width: unset; height: 100%; }
.c-report-dashboard { display: flex; gap: 24px; height: 100%; }
.c-report-dashboard .table thead th { border-top: 0; border-bottom: 0; }
.c-report-dashboard .table th,
.c-report-dashboard .table td { min-width: 150px;}
.c-report-dashboard .c-report-detail { flex-grow: 1; min-width: 1%; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; height: 100%;}
.c-report-dashboard .c-report-detail .c-report-export { display: flex; justify-content: space-between;}
.c-report-dashboard .c-report-detail .c-report-export .c-btn-right { display: flex; gap: 12px;}
.c-report-dashboard .c-report-detail .c-report-export .c-btn-right .c-btn-filter { display: none;} 
.c-report-dashboard .c-report-detail .c-table-report { flex-grow: 1; overflow: auto; max-height: none; border: 1px solid var(--table-line); border-radius: 8px; height: 100%;}
.c-report-dashboard .c-report-detail .c-table-report [data-field-type="integer"] { min-width: 100px; width: 100px;}
.c-report-dashboard .c-report-detail .c-table-report [data-field-type="decimal"] { min-width: 120px; width: 120px;}
.c-report-dashboard .c-report-detail .c-table-report [data-field-type="date"] { min-width: 150px; width: 150px;}
.c-report-dashboard .c-report-detail .c-table-report [data-field-type="integer"],
.c-report-dashboard .c-report-detail .c-table-report [data-field-type="decimal"] { text-align: right;}

.c-report-dashboard .c-report-filter { max-width: calc(290px + 24px); display: flex; flex-direction: column; gap: 16px; padding: 24px 0; }
.c-report-dashboard .c-report-filter .c-btn-filter { display: flex; margin-left: auto;}
.c-report-dashboard .c-report-filter[data-toggle="0"] .divFilterForm,
.c-report-dashboard .c-report-filter[data-toggle="1"] .c-btn-filter { display: none;}
.c-report-dashboard .c-report-filter[data-toggle="1"] { width: 100%; border-left: 1px solid var(--color-line); padding-left: 24px; }
.c-report-dashboard .c-report-filter[data-toggle="1"] .divFilterForm { display: block; width: 100%; overflow: auto;}
.c-report-dashboard .c-report-filter .c-report-normal-head-filter { display: flex; gap: 12px; justify-content: space-between; align-items: center;}


/* container full auto padding-left/ padding-right: 48px/24px */
.container-fuild-screen,
.c-style .container.container-fuild-screen { padding-left: 48px; padding-right: 48px; max-width: 100%; }
@media (max-width: 1280px) {
	.container-fuild-screen,
	.c-style .container.container-fuild-screen { padding-left: 24px; padding-right: 24px; }	
}

/* workspace copy url */
#p24 .c-style .q-copy-url .form-control { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--form-control-font); }

/* user menu */
/* #divPortal .q-user ul li { --usermenu-gap-icon: 6px; }
#divPortal .q-user ul li:hover { background: #EFF2F4; }
#divPortal .q-header.c-header { padding: 7px 8px 7px 16px; }
#divPortal .b-header-column { padding: 0 16px; }
#divPortal .q-user { margin-left: 8px; }
#divPortal .q-user .dropdown-menu hr { margin: 0; border-color: #E3E6E8; }
#divPortal .q-user .q-switch-box { border: 0; max-height: 30vh;}
#divPortal.portal:not(.eUniteApp) .q-user .q-switch-box { border: 0; max-height: 50vh; } 
#divPortal .q-user ul { padding: 4px 0; }
#divPortal .q-user .q-switch { padding: 0;}
#divPortal .q-user .q-switch ul { padding-top: 0px;}
#divPortal .q-user .q-switch li.active i { opacity: 1; }
#divPortal .q-user ul li { padding: 0 8px 0 16px; background: #FFFFFF;}
#divPortal .q-user .q-switch i { opacity: 0; margin-right: var(--usermenu-gap-icon); font-size: 10px; }
#divPortal .q-user ul li a { padding: 8px 0; font: var(--typo-body-lg); display: flex; gap: var(--usermenu-gap-icon); align-items: center; color: #131313; cursor:pointer; min-height: 44px;}
#divPortal .q-user ul li i { font-size: 12px; color: #545555; display: flex; width: 28px; min-width: 28px; height: 28px; padding: 9px; justify-content: center; align-items: center;}
#divPortal .q-user .dropdown-menu.show .q-switch span{ color: #888888; padding: 4px 20px 0; font-size: 12px; font-weight: bold;}
#divPortal .dropdown-menu-right .q-user-account .q-name { color: #1e1e1e; font: var(--typo-body-xl);}
#divPortal .dropdown-menu-right .q-user-account .q-position { font: var(--typo-body-lg); color: #888888;}
#divPortal .q-user .dropdown-menu { border-radius: 8px; margin-top: 12px; max-width: 280px; width: 100%; border: 0; padding: 0;}
#divPortal .dropdown-menu-right .q-user-account { margin: 12px; border-radius: 6px; padding: 12px 8px; align-items: center; background: linear-gradient(to top, rgba(255, 255, 255, 92%), rgba(255, 255, 255, 92%)) var(--primary);}
#divPortal .dropdown-menu-right .q-user-account .q-user-account-images img {max-width: 38px;max-height: 38px;min-width: 38px;min-height: 38px;}
#divPortal .q-header .q-account .c-mb-dropdown-close { display: none; }
#divPortal .q-header .q-account .b-user .btn.q-user-dropdownbtn { border-radius: 6px; border-color: transparent; gap: 12px; padding: 0 8px; height: 38px; margin-left: 0; background: transparent;}
#divPortal .q-header .q-account .btn.q-user-dropdownbtn i { font-size: 12px; color: #545555;}
#divPortal .q-header .q-account .divProfileInfo.show .btn.q-user-dropdownbtn i.c-ico-a-1:before { content: "\e912"; }
#divPortal .q-header .q-account .b-user .btn.q-user-dropdownbtn:hover,
#divPortal .q-header .q-account .b-user .btn.q-user-dropdownbtn:active { border-color: #E3E6E8; }
#divPortal .q-header .q-account .b-user .btn.q-user-dropdownbtn:hover { background: transparent;}
#divPortal .q-header .q-account .b-user .divProfileInfo.show .btn.q-user-dropdownbtn { background: #EFF2F4; border-color: #E3E6E8;} */
/* user menu */

/* scrollbar Webkit browsers (Chrome, Safari, Edge) */
#divPortal ::-webkit-scrollbar,
#divPortal::-webkit-scrollbar { width: 15px; height: 15px; } 
#divPortal ::-webkit-scrollbar-track,
#divPortal::-webkit-scrollbar-track { background-color: transparent; }
#divPortal ::-webkit-scrollbar-thumb,
#divPortal::-webkit-scrollbar-thumb { background-color: #CBCECF; border: 4px solid rgba(0, 0, 0, 0); border-radius: 100px; background-clip: padding-box; min-height: 80px; }
#divPortal ::-webkit-scrollbar-thumb:hover,
#divPortal::-webkit-scrollbar-thumb:hover { background-color: #A7A9AB; }
#divPortal ::-webkit-scrollbar-button,
#divPortal::-webkit-scrollbar-button { display:none; }
#divPortal ::-webkit-scrollbar-corner,
#divPortal::-webkit-scrollbar-corner { background-color: transparent; }
#divPortal ::-webkit-resizer,
#divPortal::-webkit-resizer { background-color: transparent; }
#divPortal ::-webkit-scrollbar-button:start,
#divPortal::-webkit-scrollbar-button:start { display: none; }
#divPortal ::-webkit-scrollbar-button:end,
#divPortal::-webkit-scrollbar-button:end { display: none; }
#divPortal ::-webkit-scrollbar-track-piece,
#divPortal::-webkit-scrollbar-track-piece { display: none; }
#divPortal .dropdown-menu::-webkit-scrollbar-track { background-color: #FFFFFF; }

/* scrollbar Firefox */
#divPortal { scrollbar-width: thin; scrollbar-color: #CBCECF transparent; }
#divPortal:hover { scrollbar-color: #A7A9AB transparent; }

/* scrollbar Firefox for .dropdown-menu */
/* #divPortal .dropdown-menu { scrollbar-color: #FFFFFF #FFFFFF; } */

.border-radius-8 { border-radius: 8px;}
.border-radius-4 { border-radius: 4px;}

.divBoard[data-type="Home"] .b-header-widget .b-header-widget-viewall { white-space: nowrap;}
.b-header-widget .b-header-widget-name { min-width: 0;}

body:not([data-platform]) [rich="1"] .divText .fldText {
	--line-height-euniteapp: var(--line-height);
}

/* line-height support engage */
content#p24 .q-title-form,
content#p24 .q-menutab-left h4 { --line-height-euniteapp: 1.6; }

/*pc only excluding iPad*/ 
@media (hover: hover) and (pointer: fine) {
	.c-input-group-lookup:hover .form-control,
	.c-input-group-lookup:hover .input-group-append .btn,
	.c-input-group-lookup .form-control:hover + .input-group-append .btn,
	.c-input-group-lookup .form-control:hover ~ .input-group-append .btn { border-color: var(--form-control-hover-border); }
	.c-style .form-control:hover:not(:focus),
	.c-style .form-control:hover:not(:focus) + .input-group-append .btn { border-color: var(--form-control-hover-border); }
}

@media (max-width:992px) {
	.c-myannounce-heading-group { flex-direction: column; gap: 6px; align-items: start; }
	.c-myannounce-heading-group .c-myannounce-heading { width: 100%; }
	.c-myannounce-info { min-width: 1px; max-width: 100%; }
	.c-myannounce-heading-group .c-myannounce-acknowledgetime { gap: 10px; }
	.c-myannounce-heading-group .c-myannounce-acknowledgetime i { min-width: 18px; justify-content: center; display: flex; padding: 0; }
	.c-myannounce-img { width: 88px; min-width: 88px; height: 66px; min-height: 66px; }
}

@media (min-width:768px) {
	.divBoard[data-type="Home"] .b-header-widget .b-header-widget-viewall .btn { padding-right: 0 !important; }
	.divBoard[data-type="Home"] .b-header-widget .b-header-widget-viewall .btn:hover { background-color: #EFF2F4; }
	.b-header-widget .b-header-widget-name .text-truncate { line-height: 26px;}
	
	.c-style .btn.btn[class*="btn-"].btnReload:not(:has( + button.btn)) { margin-right: 4px;}
}

@media (min-width: 769px) {
	.btn.c-btn-toggleuserflow { font-weight: 400; font-size: 12px; top: -6px; position: relative; }

	.c-style .q-table-row .q-table-col-fixed-right { right:0;}
}