/* :root .q-style, */
:root {
	/* Colors */
	--color-qcolor3: #FF5300;
	--primary: var(--color-qcolor3) !important;
	--primary-color: var(--color-qcolor3) !important;
	--disabled: #D7DADC;
	--disabled-txt: #A7A9AB;
	--secondary: #848586 !important;
	--secondary-txt: #303031;
	--secondary-hover-txt: #848586;
	--secondary-active-txt: #1E1E1E;
	--dark: #1E1E1E !important;
	--dark-hover-txt: #6C6D6E;
	--dark-active-txt: #1E1E1E;
	--danger: #DC220C !important;
	--success: #00CA79 !important;
	--warning: #FFCD15 !important;
	--light: transparent;

	--border-dark: #CBCECF;
	--border-default: #D7DADC;
	--border-light: #E3E6E8;

	/* Form */
	--form-label: bold 14px/20px var(--font-family-body);
	--form-control-font: normal 14px/20px var(--font-family-body);
	--form-control-height: 36px;
	--form-control-textarea-height: 87px;
	--form-control-padding: 8px 10px;
	--form-control-placeholder: #A7A9AB;
	--form-control-border: #848586;
	--form-control-bg: #FFF;
	--form-control-txt: #1E1E1E;
	--form-control-disabled-border: #D7DADC;
	--form-control-disabled-bg: #EFF2F4;
	--form-control-disabled-txt: #A7A9AB;
	--form-control-disabled-icon: #D7DADC;
	--form-control-focus-border: #545555;
	--form-control-sm-height: 32px;
	--form-control-sm-padding: 6px 10px;
	--form-control-xs-height: 24px;
	--form-control-xs-padding: 2px 10px;

	/* Dropdown */
	--dropdown-btn-padding: 8px 4px 8px 10px;
	--dropdown-border: #E3E6E8;
	--dropdown-backdrop: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
	--dropdown-bg: #FFF;
	--dropdown-spacing: 0;
	--dropdown-option-spacing: 10px 12px;
	--dropdown-option-font: normal 14px/20px var(--font-family-body);
	--dropdown-option-hover-bg: #EFF2F4;
	--dropdown-option-focus-bg: #E3E6E8;
	--dropdown-option-color: #1E1E1E;
	--dropdown-option-maxheight: 368px;

	/* Dropdown - Lookup */
	--lookup-option-default-amount: 10;
	--lookup-option-bg: #EFF2F4;
	--lookup-option-hover-bg: #E3E6E8;
	--lookup-option-focus-bg: #D7DADC;
	--lookup-option-color: #545555;
	--lookup-option-btn-height: 24px;
	--lookup-option-btn-font: normal 12px/18px var(--font-family-body);
	--lookup-option-margin: 10px;
	--lookup-option-padding: 8px 10px;
	--lookup-option-maxheight: calc((36px * var(--lookup-option-default-amount)) + 53px);
	--lookup-option-ico-size: 24px;

	/* Table */
	--table-header-font: normal 12px/16px var(--font-family-body);
	--table-header-color: #6C6D6E;
	--table-btn-option-width: 32px;
	--table-btn-option-height: 32px;
	--table-btn-option-color: #65676A;
	--table-row-shadow: 0px 2px 8px rgb(0 0 0 / 30%);
	--q-action-width:fit-content;

	/* Typography */
	--typo-mont-page-title: bold 32px/40px var(--font-family-mont);
	--typo-mont-page-subtitle: bold 22px/30px var(--font-family-mont);

	--typo-page-title: bold 22px/30px var(--font-family-body);
	--typo-page-subtitle: bold 18px/26px var(--font-family-body);
	--typo-section-title: bold 16px/24px var(--font-family-body);
	--typo-section-subtitle: bold 14px/20px var(--font-family-body);
	--typo-bold-body-xl: bold 16px/24px var(--font-family-body);
	--typo-bold-body-lg: bold 14px/20px var(--font-family-body);
	--typo-bold-body-md: bold 12px/18px var(--font-family-body);
	--typo-bold-body-sm: bold 10px/14px var(--font-family-body);
	--typo-body-xl: normal 16px/24px var(--font-family-body);
	--typo-body-lg: normal 14px/20px var(--font-family-body);
	--typo-body-md: normal 12px/18px var(--font-family-body);
	--typo-body-sm: normal 10px/14px var(--font-family-body);

	/* Buttons */
	/* Buttons xs */
	--btn-xs-height: 24px;
	--btn-xs-minwidth: 56px;
	--btn-xs-font: bold 12px/18px var(--font-family-body);
	--btn-xs-padding: 3px 12px;
	--btn-xs-icon: 16px;
	--btn-xs-singleicon: 18px;

	/* Buttons sm */
	--btn-sm-height: 28px;
	--btn-sm-minwidth: 72px;
	--btn-sm-font: bold 14px/20px var(--font-family-body);
	--btn-sm-padding: 4px 12px;
	--btn-sm-icon: 18px;
	--btn-sm-singleicon: 20px;

	/* Buttons md */
	--btn-md-height: 32px;
	--btn-md-minwidth: 72px;
	--btn-md-font: bold 14px/20px var(--font-family-body);
	--btn-md-padding: 6px 12px;
	--btn-md-icon: 20px;
	--btn-md-singleicon: 20px;

	/* Buttons lg */
	--btn-lg-height: 36px;
	--btn-lg-minwidth: 72px;
	--btn-lg-font: bold 16px/22px var(--font-family-body);
	--btn-lg-padding: 7px 16px;
	--btn-lg-icon: 22px;
	--btn-lg-singleicon: 22px;

	/* Buttons xs */
	--btn-xl-height: 44px;
	--btn-xl-minwidth: 88px;
	--btn-xl-font: bold 16px/22px var(--font-family-body);
	--btn-xl-padding: 11px 16px;
	--btn-xl-icon: 22px;
	--btn-xl-singleicon: 24px;

	/* Button - Link */
	--btn-link-padding: 0 8px;

	/* Button - Light */
	--btn-light-padding: 3px 8px;

	/* Font Family */
	--font-family-mont: -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-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";

	/* Menu */
	--menu-hover: linear-gradient(to top, rgba(255, 255, 255, 85%), rgba(255, 255, 255, 85%)) var(--color-qcolor3);

	/* Icon Size */
	--ico-size-12: 12px;
	--ico-size-14: 14px;
	--ico-size-16: 16px;
	--ico-size-20: 20px;
	--ico-size-24: 24px;
	--ico-size-28: 28px;
	--ico-size-32: 32px;

	/* Tabs */
	--tabs-nav-color: #E3E6E8;
	--tabs-nav-spacing: 16px;
	--tabs-link-color: #848586;
	--tabs-link-active-color: #2E2E2E;
	--tabs-link-font: bold 14px/20px var(--font-family-body);

	/* padding */
	--padding-modal-body-left-right: 20px;
}

.q-style { --color-chatBubble: #303031; }
.q-input-group-lookup-multigroup { 
	--lookup-option-default-amount: 4; 
	--lookup-option-maxheight: calc((36px* var(--lookup-option-default-amount)) + 53px);
	max-height: var(--lookup-option-maxheight);
}
.q-style .btn { --primary: var(--color-qcolor8, var(--color-qcolor3)); }
* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font: var(--typo-body-lg); letter-spacing: 0.2px; }
div#divDropZone { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; text-align: center; color: black; font-size: 90px; border: 2px dashed rgba(13, 71, 161, 0.7); background-color: rgba(255, 255, 255, 0.75); }
input[type="time"]::-webkit-calendar-picker-indicator { display:none; }



/* Icon - Resource */
[data-mime*="video/"] .q-ico-r1:before  { content: "\e9b9"; }
[data-mime="embedded"] .q-ico-r1:before { content: "\e9c3"; }
[data-mime*="image/"] .q-ico-r1:before{ content: "\e9bc"; }
[data-mime="application/pdf"] .q-ico-r1:before { content: "\e9ba"; }
[data-mime="application/octet-stream"] .q-ico-r1:before { content: "\e9c0"; }
[data-mime="application/zip"] .q-ico-r1:before { content: "\e9bb"; }
[data-mime="assignment"] .q-ico-r1:before { content: "\e9c1"; }
[data-mime="resources"] .q-ico-r1:before { content: "\e9c2"; }

@media (min-width: 1px) {
	.q-style .container { max-width: 1312px; }
}

.q-style .text-grey-10 { color: #1E1E1E; }
.q-style .text-grey-20 { color: #303031; }
.q-style .text-grey-30 { color: #545555; }
.q-style .text-grey-40 { color: #6C6D6E; }
.q-style .text-grey-50 { color: #848586; }
.q-style .text-grey-60 { color: #A7A9AB; }
.q-style .text-grey-70 { color: #CBCECF; }
.q-style .text-grey-80 { color: #D7DADC; }
.q-style .text-grey-90 { color: #E3E6E8; }

.q-style .h1,
.q-style .h2,
.q-style .h3,
.q-style .h4 { margin: 0; }
.q-style .h1 { font: bold 22px/30px var(--font-family-body); }
.q-style .h2 { font: bold 18px/26px var(--font-family-body); }
.q-style .h3 { font: bold 16px/24px var(--font-family-body); }
.q-style .h4 { font: bold 14px/20px var(--font-family-body); }

.q-style .text-large { font: normal 14px/20px var(--font-family-body); }
.q-style .text-medium { font: normal 12px/18px var(--font-family-body); }
.q-style .text-small { font: normal 10px/14px var(--font-family-body); }

.q-style hr { margin: 20px 0; border-top: 1px solid #D7DADC; }

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

/* Typography */
.q-style .text-primary { color: var(--primary) !important; }
.q-style .text-danger { color: var(--danger) !important; }
.q-style .text-secondary { color: var(--secondary) !important; }

/* Icon */
.q-ico-size-12 { font-size: var(--ico-size-12) !important; min-width: var(--ico-size-12) !important; max-width: var(--ico-size-12) !important; aspect-ratio: 1/1; }
.q-ico-size-14 { font-size: var(--ico-size-14) !important; min-width: var(--ico-size-14) !important; max-width: var(--ico-size-14) !important; aspect-ratio: 1/1; }
.q-ico-size-16 { font-size: var(--ico-size-16) !important; min-width: var(--ico-size-16) !important; max-width: var(--ico-size-16) !important; aspect-ratio: 1/1; }
.q-ico-size-20 { font-size: var(--ico-size-20) !important; min-width: var(--ico-size-20) !important; max-width: var(--ico-size-20) !important; aspect-ratio: 1/1; }
.q-ico-size-24 { font-size: var(--ico-size-24) !important; min-width: var(--ico-size-24) !important; max-width: var(--ico-size-24) !important; aspect-ratio: 1/1; }
.q-ico-size-28 { font-size: var(--ico-size-28) !important; min-width: var(--ico-size-28) !important; max-width: var(--ico-size-28) !important; aspect-ratio: 1/1; }
.q-ico-size-32 { font-size: var(--ico-size-32) !important; min-width: var(--ico-size-32) !important; max-width: var(--ico-size-32) !important; aspect-ratio: 1/1; }

/* Buttons */
.q-style .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; vertical-align: baseline; gap: 4px; 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; }
.q-style .btn.focus,
.q-style .btn:focus { box-shadow: none; }
.q-style .btn.disabled,
.q-style .btn:disabled { opacity: 1; cursor: default; }
.q-style .btn-group-xs>.btn,
.q-style .btn-xs { height: var(--btn-xs-height); padding: var(--btn-xs-padding); font: var(--btn-xs-font); min-width: var(--btn-xs-minwidth); }
.q-style .btn.btn-xs i:not([class*="q-ico-size"]) { font-size: var(--btn-xs-icon); min-width: var(--btn-xs-icon); }
.q-style .btn-group-sm>.btn,
.q-style .btn-sm { height: var(--btn-sm-height); padding: var(--btn-sm-padding); font: var(--btn-sm-font); min-width: var(--btn-sm-minwidth); }
.q-style .btn.btn-sm i:not([class*="q-ico-size"]) { font-size: var(--btn-sm-icon); min-width: var(--btn-sm-icon); }
.q-style .btn i:not([class*="q-ico-size"]) { font-size: var(--btn-md-icon); min-width: var(--btn-md-icon); }
.q-style .btn-group-lg>.btn,
.q-style .btn-lg { height: var(--btn-lg-height); padding: var(--btn-lg-padding); font: var(--btn-lg-font); min-width: var(--btn-lg-minwidth); }
.q-style .btn.btn-lg i:not([class*="q-ico-size"]) { font-size: var(--btn-lg-icon); min-width: var(--btn-lg-icon); }
.q-style .btn-group-xl>.btn,
.q-style .btn-xl { height: var(--btn-xl-height); padding: var(--btn-xl-padding); font: var(--btn-xl-font); min-width: var(--btn-xl-minwidth); }
.q-style .btn.btn-xl i:not([class*="q-ico-size"]) { font-size: var(--btn-xl-icon); min-width: var(--btn-xl-icon); }
.q-style .btn .badge { min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 1px 5px; top: 0; }
.q-style .btn.btn-outline-secondary .badge { background-color: var(--secondary-txt); color: #FFF; }
.q-style .btn.q-btn-copy-link, 
.q-style .btn.q-btn-form-control { height: var(--form-control-height); min-width: var(--form-control-height); }
.q-style .btn.q-icon-right { padding-right: 8px; }
.q-style .btn.q-icon-left { padding-left: 8px; }

/* Buttons - Primary */
.q-style .btn-primary { border: 0; background-color: var(--primary); }
.q-style .btn-primary:not(:disabled):not(.disabled):hover { background: linear-gradient(to top, rgba(255, 255, 255, 30%), rgba(255, 255, 255, 30%)) var(--primary); }
.q-style .btn-primary:not(:disabled):not(.disabled).active,
.q-style .btn-primary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-primary.dropdown-toggle { background: linear-gradient(to top, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)) var(--primary); box-shadow: none; }
.q-style .btn-primary.disabled,
.q-style .btn-primary:disabled { background-color: var(--disabled); border-color: var(--disabled); color: var(--disabled-txt); }

/* Buttons - Outline Primary */
.q-style .btn-outline-primary,
.e-btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.q-style .btn-outline-primary:not(:disabled):not(.disabled):hover,
.e-btn-outline-primary: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); }
.q-style .btn-outline-primary:not(:disabled):not(.disabled).active,
.q-style .btn-outline-primary:not(:disabled):not(.disabled):active,
.e-btn-outline-primary:not(:disabled):not(.disabled).active,
.e-btn-outline-primary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-outline-primary.dropdown-toggle { background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 80%)) var(--primary); border-color: var(--primary); color: var(--primary); box-shadow: none; }
.q-style .btn-outline-primary.disabled,
.q-style .btn-outline-primary:disabled,
.e-btn-outline-primary.disabled,
.e-btn-outline-primary:disabled { border-color: var(--disabled); color: var(--disabled-txt); }

/* Buttons - Outline Secondary */
.q-style .btn-outline-secondary { background-color: #FFF; border-color: var(--secondary-txt); color: var(--secondary-txt); }
.q-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(--secondary-txt); color: var(--secondary-txt); }
.q-style .btn-outline-secondary:not(:disabled):not(.disabled).active,
.q-style .btn-outline-secondary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-outline-secondary.dropdown-toggle { background: linear-gradient(to top, rgba(255, 255, 255, 80%), rgba(255, 255, 255, 80%)) var(--secondary-txt); border-color: var(--secondary-txt); color: var(--secondary-txt); box-shadow: none; }
.q-style .btn-outline-secondary.disabled,
.q-style .btn-outline-secondary[disabled],
.q-style .btn-outline-secondary:disabled { border-color: var(--disabled); color: var(--disabled-txt); }

/* Buttons - Outline Light */
.q-style .btn-outline-light { background-color: #FFF; border-color: #D7DADC; color: #A7A9AB; }
.q-style .btn-outline-light:not(:disabled):not(.disabled):hover { background: #EFF2F4; color: #A7A9AB; }
.q-style .btn-outline-light:not(:disabled):not(.disabled).active,
.q-style .btn-outline-light:not(:disabled):not(.disabled):active,
.q-style .show>.btn-outline-light.dropdown-toggle {  background: #EFF2F4; border-color: #D7DADC; color: #A7A9AB; box-shadow: none; }
.q-style .btn-outline-light.disabled,
.q-style .btn-outline-light:disabled { border-color: var(--disabled); color: var(--disabled-txt); }

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

/* Buttons - Outline Dark */
.q-style .btn-outline-dark { background-color: #FFF; border-color: var(--dark); color: var(--txt-dark); }
.q-style .btn-outline-dark:not(:disabled):not(.disabled):hover { background: linear-gradient(to top, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 90%)) var(--dark); color: var(--txt-dark); }
.q-style .btn-outline-dark:not(:disabled):not(.disabled).active,
.q-style .btn-outline-dark:not(:disabled):not(.disabled):active,
.q-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(--dark); color: var(--txt-dark); box-shadow: none; }
.q-style .btn-outline-dark.disabled,
.q-style .btn-outline-dark:disabled { border-color: var(--disabled); color: var(--disabled-txt); }

/* Button - Link */
.q-style .btn-link { text-decoration: underline; font-weight: normal; width: fit-content; min-width: 1px; padding: var(--btn-link-padding); }

/* Button - Link Primary */
.q-style .btn-link-primary { color: var(--primary); }
.q-style .btn-link-primary:not(:disabled):not(.disabled):hover { color: var(--primary); }
.q-style .btn-link-primary:not(:disabled):not(.disabled).active,
.q-style .btn-link-primary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-link-primary.dropdown-toggle { color: var(--primary); }

/* Button - Link Secondary */
.q-style .btn-link-secondary { color: var(--secondary-txt); }
.q-style .btn-link-secondary:not(:disabled):not(.disabled):hover { color: var(--secondary-hover-txt); }
.q-style .btn-link-secondary:not(:disabled):not(.disabled).active,
.q-style .btn-link-secondary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-link-secondary.dropdown-toggle { color: var(--secondary-active-txt); }

/* Button - Link Danger */
.q-style .btn-link-danger { color: var(--danger); }

/* Button - Link Dark */
.q-style .btn-link-dark { color: var(--dark-txt); }
.q-style .btn-link-dark:not(:disabled):not(.disabled):hover { color: var(--dark-hover-txt); }
.q-style .btn-link-dark:not(:disabled):not(.disabled).active,
.q-style .btn-link-dark:not(:disabled):not(.disabled):active,
.q-style .show>.btn-link-dark.dropdown-toggle { color: var(--dark-active-txt); }
.q-style .btn-link-dark.disabled, 
.q-style .btn-link-dark:disabled { color: var(--disabled-txt); background: none; border: 0; }

/* Button - Light */
.q-style .btn-light { padding: var(--btn-light-padding); border: 0; background-color: var(--light); }
.q-style .btn-light:not(:disabled):not(.disabled):hover { background-color: var(--light); }
.q-style .btn-light:not(:disabled):not(.disabled).active,
.q-style .btn-light:not(:disabled):not(.disabled):active,
.q-style .show>.btn-light.dropdown-toggle { background-color: var(--light); box-shadow: none; }
.q-style .btn-light.disabled, 
.q-style .btn-light:disabled { color: var(--disabled); }

/* Button - Light Primary */
.q-style .btn-light-primary { color: var(--primary); }
.q-style .btn-light-primary:not(:disabled):not(.disabled):hover { color: var(--primary); }
.q-style .btn-light-primary:not(:disabled):not(.disabled).active,
.q-style .btn-light-primary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-light-primary.dropdown-toggle { color: var(--primary); }

/* Button - Light Secondary */
.q-style .btn-light-secondary { color: var(--secondary-txt); }
.q-style .btn-light-secondary:not(:disabled):not(.disabled):hover { color: var(--secondary-hover-txt); }
.q-style .btn-light-secondary:not(:disabled):not(.disabled).active,
.q-style .btn-light-secondary:not(:disabled):not(.disabled):active,
.q-style .show>.btn-light-secondary.dropdown-toggle { color: var(--secondary-active-txt); }
.q-style .btn-light-secondary.disabled, 
.q-style .btn-light-secondary:disabled { color: var(--disabled-txt); background: none; border: 0; }

/* Button - Light Dark */
.q-style .btn-light-dark { color: var(--dark); }
.q-style .btn-light-dark:not(:disabled):not(.disabled):hover { color: var(--dark-hover-txt); }
.q-style .btn-light-dark:not(:disabled):not(.disabled).active,
.q-style .btn-light-dark:not(:disabled):not(.disabled):active,
.q-style .show>.btn-light-dark.dropdown-toggle { color: var(--dark-active-txt); }

/* Button - Light Primary */
.q-style .btn-light-light { color: #A7A9AB; }
.q-style .btn-light-light:not(:disabled):not(.disabled):hover { color: #A7A9AB; background-color: #EFF2F4; }
.q-style .btn-light-light:not(:disabled):not(.disabled).active,
.q-style .btn-light-light:not(:disabled):not(.disabled):active,
.q-style .show>.btn-light-light.dropdown-toggle { color: #A7A9AB; }

/* Button - Text Link */
.q-style .btn.btn-text { font-weight: normal; }
.q-style .btn-text-link { padding: 0; height: auto; text-decoration: underline; border: 0; }
.q-style .btn-text-link.disabled{color:#A7A9AB; }
.q-style .btn-text-link-primary { color: var(--primary); }

/* Button - Icon */
.btn.q-btn-icon { text-decoration: none; min-width: var(--btn-md-height); padding: 0; justify-content: center; }
.btn.q-btn-icon i:not([class*="q-ico-size"]) { font-size: var(--btn-md-singleicon); min-width: var(--btn-md-singleicon); }
.btn.btn-xs.q-btn-icon { min-width: var(--btn-xs-height); }
.btn.btn-xs.q-btn-icon i:not([class*="q-ico-size"]) { font-size: var(--btn-xs-singleicon); min-width: var(--btn-xs-singleicon); }
.btn.btn-sm.q-btn-icon { min-width: var(--btn-sm-height); }
.btn.btn-sm.q-btn-icon i:not([class*="q-ico-size"]) { font-size: var(--btn-sm-singleicon); min-width: var(--btn-sm-singleicon); }
.btn.btn-lg.q-btn-icon { min-width: var(--btn-lg-height); }
.btn.btn-lg.q-btn-icon i:not([class*="q-ico-size"]) { font-size: var(--btn-lg-singleicon); min-width: var(--btn-lg-singleicon); }
.btn.btn-xl.q-btn-icon { min-width: var(--btn-xl-height); }
.btn.btn-xl.q-btn-icon i:not([class*="q-ico-size"]) { font-size: var(--btn-xl-singleicon); min-width: var(--btn-xl-singleicon); }

/* Button - Icon Dropdown */
.q-btn-icon.dropdown-toggle::after { display: none; }
.q-btn-icon.dropdown-toggle::after { display: none; }

/* grabZone - disabled */
.grabZone.btn[disabled],
.grabZone.btn[disabled]:hover{ color: var(--disabled-txt) !important; cursor: default; pointer-events: none;}

/* Form Control */
.q-style .col-form-label { font: var(--form-label); margin-bottom: 4px; padding-top: 0; padding-bottom: 0; }
.q-style .form-group { margin-bottom: 20px; }
.q-style .form-group .text { font: var(--typo-body-sm); margin-top: 2px; color: #6c757d; }
.q-style .form-group .text.text-secondary { font: var(--typo-body-md); margin-top: -2px; margin-bottom: 12px; }
.q-style .form-group .text.text-dark { font: var(--typo-body-md); margin-top: -2px; margin-bottom: 12px; color: #545555; }
.q-style .form-control { 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: 4px; }
.q-style .form-control[type="text"] { max-height: var(--form-control-height); height: auto; min-height: var(--form-control-height); }
.q-style textarea.form-control[type="text"] { --form-control-height: var(--form-control-textarea-height); }
.q-style .form-danger .form-control:focus,
.q-style .form-danger .form-control,
.q-style .form-danger .input-group-append .input-group-text,
.q-style .form-danger .select2-container--default .select2-selection--single { border-color: var(--danger); }
.q-style ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--form-control-placeholder); opacity: 1; /* Firefox */ }
.q-style :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--form-control-placeholder); }
.q-style ::-ms-input-placeholder { /* Microsoft Edge */ color: var(--form-control-placeholder); }
.q-style textarea.form-control { min-height: var(--form-control-textarea-height); }
.q-style .form-control:focus { box-shadow: none; border-color: var(--form-control-focus-border); }
.q-style .form-control:disabled, .q-style .form-control.disabled, .q-style .form-control:disabled + .input-group-append > *, .q-style .form-control[readonly], 
.q-style .form-control[readonly] + .input-group-append > *{ border-color: var(--form-control-disabled-border); background: var(--form-control-disabled-bg); }
.q-style .form-control-sm { padding: var(--form-control-sm-padding); height: var(--form-control-sm-height); }
.q-style .form-control-xs { padding: var(--form-control-xs-padding); height: var(--form-control-xs-height); }
.q-style .form-group.row { /*gap: 8px 0;*/ align-items: center; }
.q-style .form-group .col-form-label.text { font: var(--form-label); font-weight: normal; }
.q-style .form-control.ctrequire { border-color: var(--danger); }
.q-style .q-btn-form-control-box { display: flex; gap: 16px; }

/* Input Group */
.q-style .input-group>.custom-file+.custom-select,
.q-style .input-group>.custom-file+.custom-file,
.q-style .input-group>.custom-file+.form-control,
.q-style .input-group>.custom-select+.custom-file,
.q-style .input-group>.custom-select+.custom-select,
.q-style .input-group>.custom-select+.form-control,
.q-style .input-group>.form-control+.custom-file,
.q-style .input-group>.form-control+.custom-select,
.q-style .input-group>.form-control+.form-control,
.q-style .input-group>.form-control-plaintext+.custom-file,
.q-style .input-group>.form-control-plaintext+.custom-select,
.q-style .input-group>.form-control-plaintext+.form-control { margin-left: 0; }
.q-style .input-group .form-control { border-right: 0; border-radius: 4px; }
.q-style .input-group-append .btn { height: 100%; border-left: 0; background: var(--lookup-option-bg); 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; }
.q-style .input-group-prepend .btn { height: 100%; background: var(--lookup-option-bg); min-width: 40px; color: var(--lookup-option-color); border-color: var(--form-control-border); border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0; }
.q-style .form-danger .input-group-append .btn,
.q-style .form-danger .input-group-prepend .btn { border-color: var(--danger); }
.q-style .input-group-append .btn:hover,
.q-style .input-group-prepend .btn:hover { background: var(--lookup-option-hover-bg); }
.q-style .input-group-append .btn:focus,
.q-style .input-group-append .btn:active,
.q-style .input-group-prepend .btn:focus,
.q-style .input-group-prepend .btn:active { background: var(--lookup-option-focus-bg); }
.q-style .input-group-append .btn i,
.q-style .input-group-prepend .btn i { font-size: var(--lookup-option-ico-size); aspect-ratio: 1/1; }
.q-style .input-group-append .btn:not(:disabled):not(.disabled):active:focus,
.q-style .input-group-prepend .btn:not(:disabled):not(.disabled):active:focus { box-shadow: none; background: var(--lookup-option-bg); color: var(--lookup-option-color); }
.q-style .input-group.q-input-group-datepicker .input-group-append .btn { background: var(--form-control-bg); color: #979797; }
.q-style .input-group.q-input-group-datepicker .input-group-append .btn i { font-size: var(--btn-xl-singleicon); min-width: var(--btn-xl-singleicon); }
.q-style .input-group-append,
.q-style .input-group-prepend { margin: 0; }
.q-style .input-group-prepend .input-group-text { height: 100%; border-right: 0; background-color: var(--form-control-bg); padding: 0 4px 0 8px; color: var(--lookup-option-color); border-color: var(--form-control-border); border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.q-style .input-group-prepend .input-group-text i { font-size: 20px; color: #A7A7A7; }
.q-style .input-group-prepend+.form-control { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-right: 1px solid var(--form-control-border); }
.q-style .input-group .form-control:disabled+.input-group-append .btn, 
.q-style .input-group .form-control[readonly]+.input-group-append .btn { border-color: var(--form-control-disabled-border); background: var(--form-control-disabled-bg); color: var(--form-control-disabled-txt); }
.q-style .input-group .form-control:focus+.input-group-append .btn { border-color: var(--form-control-focus-border); }
.q-style .form-danger .input-group .form-control:focus+.input-group-append .btn { border-color: var(--danger); }
.q-style .input-group-append .input-group-text { height: 100%; border-left: 0; background-color: var(--form-control-bg); padding: 0 8px 0 4px; color: var(--lookup-option-color); border-color: var(--form-control-border); border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.q-style .input-group-append .input-group-text i { font-size: 20px; color: #545555; }

.q-style  .q-input-group-search { width: 100%; background-color: #FFFFFF; border: 1px solid var(--form-control-border); border-radius: 4px; max-width: 320px; }
.q-style .q-input-group-search .form-control { /*height: var(--btn-md-height);*/ padding-left: 0; border: 0; background-color: transparent;     --form-control-height: 32px; }
.q-style .q-input-group-search .input-group-prepend .input-group-text { border: 0; }
.q-style .q-input-group-search .input-group-append .btn { border: 0 !important; background-color: #FFFFFF !important; color: #A7A9AB !important; }
.q-style  .q-input-group-search:focus-within { border: 1px solid #848586; }
.q-style .q-title-page .q-input-group-search { border-color: #A7A9AB; max-width: 320px; width: 100%; margin-right: 16px;  }

.q-style .divLookupItem.row + .divLookupItem.row,
.q-style .q-lookup-list.row + .q-lookup-list.row { margin-top: 12px; }
.q-style .divLookupItem.row + .actionBar { padding: 12px 0 0; }


/* Dropdown */
.q-style .dropdown-menu { border-color: var(--dropdown-border); background: var(--dropdown-bg); filter: var(--dropdown-backdrop); border-radius: 4px; margin: 0; padding: var(--dropdown-spacing); flex-direction: column; max-height: var(--dropdown-option-maxheight); overflow-y: var(--overlay); }
.q-style .dropdown-menu.show { display: flex; }
.q-style .dropdown-menu li { padding: 0; }
.q-style .dropdown-item { font: var(--dropdown-option-font); padding: var(--dropdown-option-spacing); color: var(--dropdown-option-color); }
.q-style .dropdown-item:hover { background: var(--dropdown-option-hover-bg); color: var(--dropdown-option-color); }
.q-style .dropdown-item:focus,
.q-style .dropdown-item:active,
.q-style .dropdown-item.active { background: var(--dropdown-option-focus-bg); color: var(--dropdown-option-color); }
.q-style [disabled="disabled"] { cursor: auto; }
.q-style [disabled="disabled"] .dropdown-item,
.q-style .dropdown-item[disabled] { color: var(--disabled-txt); cursor: auto; background: #ffffff !important; }
.q-style .select2-container--default .select2-selection--single { border-color: var(--form-control-border); color: var(--form-control-font); height: var(--form-control-height); padding: var(--dropdown-btn-padding); background: var(--form-control-bg); display: flex; align-items: center; }
.q-style .select2-container--default .select2-selection--single .select2-selection__rendered { font: var(--form-control-font); color: var(--form-control-txt); flex-grow: 1; padding: 0; }
.q-style .select2-container--default .select2-selection--single .select2-selection__rendered[title="Select"] { color: #A7A9AB; }
.q-style .select2-container--default .select2-selection--single .select2-selection__arrow { position: relative; height: auto; top: inherit; right: inherit; height: 28px; width: 28px; min-width: 28px; }
.q-style .select2-container--default .select2-selection--single .select2-selection__arrow b {     position: relative; border: none !important; left: inherit; margin: 0; display: block; font-size: 28px; top: inherit; color: var(--form-control-border); }
.q-style .select2-container--default .select2-selection--single .select2-selection__arrow b::before { content: '\e90f'; 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; display: block; }
.q-style .select2-container--default .select2-selection--single[aria-disabled="true"] { border-color: var(--form-control-disabled-border); background: var(--form-control-disabled-bg); color: var(--form-control-disabled-txt); }
.q-style .select2-container--default .select2-selection--single[aria-disabled="true"] .select2-selection__arrow b { border-color: var(--form-control-disabled-icon) transparent transparent transparent; }
.q-style .select2-container { width: 100% !important; }
.q-style .select2-container--default .select2-selection--single[aria-disabled="true"] .select2-selection__rendered { color: var(--form-control-disabled-txt); }
.select2-container .select2-dropdown { border: 1px solid var(--dropdown-border); background: var(--dropdown-bg); filter: var(--dropdown-backdrop); border-radius: 4px; margin: 0; padding: var(--dropdown-spacing); word-break: break-all; }
.q-style .form-control-xs + .select2-container--default .select2-selection--single { height: var(--form-control-xs-height); padding: var(--form-control-xs-padding); padding-right: 2px; }
.q-style .form-control-xs + .select2-container--default .select2-selection--single .select2-selection__rendered { font: var(--form-control-font); }
.q-style .form-control-xs + .select2-container--default .select2-selection--single .select2-selection__arrow { height: 24px; width: 24px; }

.q-style .form-control-sm + .select2-container--default .select2-selection--single { height: var(--form-control-sm-height); padding: var(--form-control-sm-padding); padding-right: 2px; }
.q-style .form-control-sm + .select2-container--default .select2-selection--single .select2-selection__rendered { font: var(--form-control-font); }
.q-style .form-control-sm + .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; width: 28px; }

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.select2-results__option { font: var(--dropdown-option-font); padding: var(--dropdown-option-spacing); color: var(--dropdown-option-color); transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--dropdown-option-hover-bg); color: var(--dropdown-option-color); }
.select2-container--default .select2-results__option--selected { background: var(--dropdown-option-focus-bg); color: var(--dropdown-option-color); }
.q-style .input-group .dropdown-menu .dropdown-item { display: flex; gap: 12px; align-items: center; position: relative; padding: var(--lookup-option-padding); }
.q-style .input-group .dropdown-menu .dropdown-item:empty {display: none; }
.input-group .dropdown-menu li:nth-child(2) .dropdown-item::before,
.q-style .input-group .dropdown-menu li:not(:nth-child(2)) .dropdown-item::before { content: ''; left: var(--lookup-option-margin); position: absolute; top: -1px; border-bottom: 1px solid #E3E6E8; width: calc(100% - (var(--lookup-option-margin) * 2)); }
.q-style .input-group .dropdown-menu { padding-bottom: 0; max-width: 100%; min-width: 100%; display: flex; max-height: var(--lookup-option-maxheight); position: absolute !important; /*ใส่เพือป้องกัน position:fixed จาก JS*/}
.q-style .input-group .dropdown-menu .HA { display: flex; justify-content: center; padding: 12px 0; order: 1; border-top: 1px solid #D7DADC; background-color: var(--dropdown-bg); z-index: 1; position: sticky; bottom: 0; margin-top: -1px; }
.q-style .input-group .dropdown-menu .HA .dropdown-item::before { display: none; }
.q-style .input-group .dropdown-menu .HA .dropdown-item { padding: 0; justify-content: center; background-color: transparent; }
.input-group .dropdown-menu .dropdown-item .q-lookupdropdown-btn-edit { margin: -2px 0; margin-left: auto; height: var(--lookup-option-btn-height); font: var(--lookup-option-btn-font); background: transparent; border: 0; color: var(--primary); z-index: 0; min-width: fit-content; }
.input-group .dropdown-menu .dropdown-item .q-lookupdropdown-btn-edit:hover { text-decoration: underline; }
.q-style .input-group-append .dropdown-menu .btn.q-lookupdropdown-btn-add { height: 28px; border-color: transparent; background: transparent ; color: var(--primary) !important; }
.input-group .dropdown-menu .dropdown-item .q-lookupdropdown-label { display: block; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; overflow: hidden; user-select: none; }
.q-style .input-group .dropdown-menu::-webkit-scrollbar { width: 10px; height: 10px; }
.q-style .input-group .dropdown-menu::-webkit-scrollbar-track { background-color: transparent; }
.q-style .input-group .dropdown-menu::-webkit-scrollbar-thumb { background-color: #CBCECF; border: 2px solid rgba(0, 0, 0, 0); border-radius: 100px; background-clip: padding-box; }
.q-style .input-group .dropdown-menu::-webkit-scrollbar-thumb:hover { background-color: #A7A9AB; }
.q-style .input-group .dropdown-menu .dropdown-item.hover:before { content: ''; height: 4px; position: absolute; top: -4px; left: 0; background: var(--dropdown-option-hover-bg); display: block; width: 100%; }
.q-style .input-group .dropdown-menu .dropdown-item.hover { background: var(--dropdown-option-hover-bg); color: var(--dropdown-option-color); }

/* lookup dropdown badge */
.q-style .input-group-append .q-lookupdropdown-badge-box { border-top: 1px solid var(--form-control-border); border-bottom: 1px solid var(--form-control-border); display: flex; align-items: center; padding: 0 12px; }
.q-style .q-lookupdropdown-badge { border-radius: 8px; background: #E3E6E8; font: 700 var(--txt-body-xs) var(--font-family-body); color: #303031; padding: 2px 6px; }
.q-style [status="0"] .q-lookupdropdown-badge{ background: #6C6D6E; color: #FFFFFF; }
.q-style .HI:not([status]) .q-lookupdropdown-badge-box, .q-style [status="2"] .q-lookupdropdown-badge-box, .q-style .q-lookupdropdown-badge:empty { display: none; }

/* Form - Datepicker */
.q-style .input-group.q-input-group-datepicker { max-width: 200px; }
.q-style .input-group.q-input-group-datepicker .dropdown-menu { max-width: 343px; width: 100%; min-width: 343px; filter: none !important; max-height: fit-content; }

/* Form - Timepicker */
.q-style .input-group.q-input-group-timepicker { max-width: 200px; }

/* Form - Upload File + Preview Image */
.q-upload-cover { display: flex; gap: 10px 32px; flex-wrap: wrap; }
.q-upload-cover .q-cover-img { max-width: 320px; background: #EFF2F4; border: 1px solid #D7DADC; border-radius: 4px; }
.q-upload-cover.q-upload-profile .q-cover-img {max-width: 88px; border-radius: 50%; aspect-ratio: 1/1; }
.q-upload-cover.q-upload-profile .q-cover-img img { object-position: var(--c-img-pos, center); object-fit: cover; }
.q-upload-cover .embed-responsive-item { display: flex; align-items: center; justify-content: center; object-position: center; }
.q-upload-file,
.q-upload-file .custom-file-input { height: 56px; width: 100%; display: flex; align-items: center; }
.q-upload-file .custom-file-input { cursor: pointer; }
.q-upload-file .custom-file-label { display: flex; align-items: center; justify-content: center; border: 1px dashed #848586; border-radius: 4px; height: 100%; font-size: 22px; margin-bottom: 0; }
.q-upload-file .custom-file-label span { display: block; margin-left: 12px; font-size: 14px; line-height: 20px; }
.q-upload-file .custom-file-label::after { display: none; }
.q-status-file { min-height: 70px; max-width: 300px; }
.q-step-file { width: 100%; display: flex; }
.q-upload-file { align-items: center; }
.q-status-file .progress { width: 100%; margin-right: 8px; border-radius: 6px; height: 10px; background: #D7DADC; }
.q-status-file .progress-bar { background: #303031; border-radius: 6px; }
.q-status-file .q-text-percen { font-size: 12px; color: #2E2E2E; font-weight: bold; }
.q-style .q-upload-btn-remove,
.q-style .q-upload-btn-replace { height: var(--btn-sm-height); min-width: var(--btn-sm-minwidth); padding: var(--btn-sm-padding); font: var(--btn-sm-font); }
.q-step-file.q-step-file-action { flex-direction: column; align-items: flex-start; gap: 6px; }
.q-step-file-progress { align-items: baseline; }
.q-text-recommend { color: #848586; font-weight: 400; font-size: 12px; line-height: 16px; }
.q-uploadfile-right { flex-grow: 1; }

/* Form - Upload File */
.q-uploadfile-drop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgb(3 169 244 / 20%); }
.q-uploadfile { display: flex; gap: 10px 32px; flex-wrap: wrap; }
.q-uploadfile-uploaded { background: #FFFFFF; border: 1px solid #848586; border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 20px; color: #1E1E1E; min-width: 240px; max-width: 240px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 16px 10px 12px; position: relative; }
.q-uploaded-preview-ico { font-size: 32px; aspect-ratio: 1/1; }
.q-uploaded-preview-file { display: flex; align-items: baseline; flex-grow: 1; overflow: hidden;     flex-direction: column; }
.q-uploaded-preview-filename { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-uploaded-preview-filename-col {display: flex; white-space: normal; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.q-uploaded-preview-filesize {font-size: 12px; line-height: 16px; font-weight: 400; color: var(--secondary); }
.q-uploadfile-fullwidth .q-uploadfile-upload { max-width: 100%; }

.q-uploadfile-uploading { height: 70px; }
.q-uploadfile-uploading-container { display: flex; align-items: center; gap: 10px; }
.q-uploadfile-uploading .progress { max-width: 200px; width: 100%; height: 10px; background-color: #D7DADC; border-radius: 6px; gap: 6px; }
.q-uploadfile-uploading .progress-bar { background-color: #303031; border-radius: 6px; }
.q-uploadfile-uploading-percent { font-size: 12px; line-height: 16px; font-weight: bold; color: #303031; }
.q-uploadfile-action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; justify-content: center; margin-left: -20px; }
.q-uploadfile-noted { font-size: 12px; line-height: 16px; color: #848586; width: 100%; }
.q-uploadfile-noted .btn-text-link { font-size: inherit; line-height: inherit; font-weight: inherit; }
.q-uploadfile-upload-group { /*height: 70px; support btn upload photo : upload user*/ width: fit-content; }
.q-uploadfile[disabled] { pointer-events: none; }
.q-uploadfile[disabled][hasfile="1"] {pointer-events: all;}
.q-uploadfile[disabled][hasfile="1"] .q-upload-btn-remove,
.q-uploadfile[disabled][hasfile="1"] .q-upload-btn-replace { display: none;}
.q-uploadfile[disabled] .q-uploadfile-upload { border-color: var(--form-control-disabled-border);  background: var(--form-control-disabled-bg); color: var(--form-control-disabled-txt); }
.q-uploadfile-upload { background: #FFFFFF; border: 1px dashed #848586; border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 20px; color: #1E1E1E; min-width: 240px; max-width: 240px; display: flex; justify-content: center; align-items: center; gap: 4px; padding: 12px 16px 12px 12px; position: relative; cursor: pointer; }
.q-uploadfile-upload-ico { font-size: 32px; aspect-ratio: 1/1; }
.q-uploadfile-upload-file { display: flex; align-items: baseline; flex-grow: 1; overflow: hidden; }

/* Form - Upload File + Upload Cover */
.q-uploadfile .MEDIA_SHOW[data-mime*="image"],
.q-uploadfile .MEDIA_SHOW[data-mime*="video"],
.q-uploadfile .MEDIA_SHOW[data-mime*="octet-stream"] { min-width: 240px; max-width: 240px; background: #EFF2F4; border: 1px solid #D7DADC; border-radius: 4px; position: relative; display: block; padding: 0; overflow: hidden; }
.q-uploadfile .MEDIA_SHOW[data-mime*="image"]::before,
.q-uploadfile .MEDIA_SHOW[data-mime*="video"]::before,
.q-uploadfile .MEDIA_SHOW[data-mime*="octet-stream"]::before { content: ""; display: block; padding-top: 56.25%; }
.q-uploadfile .MEDIA_SHOW .embed-responsive-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.q-uploadfile .MEDIA_SHOW[data-mime*="video"]::after { content: ""; display: block; width: 32px; height: 32px; z-index: 1; position: absolute; top: 50%; left: 50%; background-repeat: no-repeat; transform: translate(-50%, -50%); background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 22 22" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 22C17.0753 22 22 17.0753 22 11C22 4.92468 17.0753 0 11 0C4.92468 0 0 4.92468 0 11C0 17.0753 4.92468 22 11 22Z" fill="white"/><path d="M15.7419 11.4431L8.77423 15.4308C8.43022 15.6276 8 15.3813 8 14.9875V7.01232C8 6.61851 8.43023 6.37245 8.77423 6.56926L15.7419 10.557C16.086 10.7539 16.086 11.2462 15.7419 11.4431Z" fill="%23303031"/></svg>'); }

/* Badge */
.q-style .badge { font-size: 12px; }

/* Tabs */
.q-style .nav-tabs { border-color: var(--tabs-nav-color); gap: var(--tabs-nav-spacing); width: 100%; overflow: var(--overlay); overflow-y: hidden; flex-wrap: nowrap; }
.q-style .nav-tabs.dragscroll { overflow: hidden; }
.q-style .nav-tabs .nav-link { align-items: center; border: 0; border-bottom: 2px solid transparent; border-radius: 0; height: 29px; padding: 0 4px 9px 4px; font: var(--tabs-link-font); color: var(--tabs-link-color); display: flex; justify-content: center; margin: 0; gap: 4px; white-space: nowrap; cursor: pointer; }
.q-style .nav-tabs li.nav-item { padding: 0; }
.q-style .nav-tabs .nav-item.show .nav-link, 
.q-style .nav-tabs .nav-link.active { border-bottom-color: var(--primary); color: var(--tabs-link-active-color); background-color: transparent; }
.q-style .nav-tabs .badge { padding: 0; font: var(--tabs-link-font); }
.q-style .nav-tabs .badge:empty { display: none; }
.q-style .nav-tabs .badge::before { content: '('; }
.q-style .nav-tabs .badge::after { content: ')'; }

/* Table */
.q-table { position: relative; }
.q-table-row { display: flex; align-items: stretch; padding: 0; margin: 0; font-size: 14px; line-height: 20px; min-height: 44px; margin-bottom: 12px; }
.q-table-row.q-table-header { position: sticky; top: 0; z-index: 3; margin: 0; min-height: 1px; background: #F7F9FA; }
.q-table-row.q-table-header::before { content: ''; position: absolute; left: -10px; width: 10px; height: 100%; background-color: #F7F9FA; display: block; }
.q-table-row.q-table-header::after { content: ''; position: absolute; right: -10px; width: 10px; height: 100%; background-color: #F7F9FA; display: block; }
.q-table-row.q-table-header .q-table-col { background: #F7F9FA; font: var(--table-header-font); color: var(--table-header-color); padding-bottom: 10px; padding-top: 20px; }
.q-table-row .q-table-col,
.q-table-row .q-box-mockup { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; display: flex; align-items: center; margin: 0; min-width: 150px; width: 150px; max-width: 150px; padding: 8px 16px; background-color: transparent; }
.q-table-row:not(.q-table-header) .q-table-col::before { display: none; }
.q-table-col-group { display: flex; flex-grow: 1; }
.q-table-row-group { display: flex; border: 1px solid #EAEAEA; box-shadow: var(--table-row-shadow); border-radius: 6px; background-color: #FFF; flex-grow: 1; }
.HM.q-item-mockup.q-table-row { display: flex; background-color: #FFF; flex-grow: 1; position: relative; }
.q-table-col-fixed-right { position: sticky; right: 0; top: 0; }
.q-table-col-fixed-left { position: sticky; left: 0; top: 0; z-index: 1; }
.q-table-row:not(.q-table-header) .q-table-col-fixed-right { background-color: #FFF; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.q-table-row:not(.q-table-header) .q-table-col-fixed-left { background-color: #FFF; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.q-table-col.q-table-col-fixed-right:focus-within, 
.q-table-row:active .q-table-col-fixed-right,
.q-table-col.q-table-col-fixed-left:focus-within, 
.q-table-row:active .q-table-col-fixed-left { z-index: 2; }
.q-table-row .q-table-fldmedia { padding-left: 10px; }
.q-table-row.q-table-header .q-table-fldmedia,
.q-table-row.q-table-header .q-table-col:first-child { padding-left: 0; }
.d-table-col-action { display: flex; gap: 24px; align-items: center; }
.q-table-row .q-table-fldmedia { max-width: 112px; min-width: 112px; padding-right: 0; }
.q-table-row .q-table-fldmedia.q-embed-ratios-1by1, 
.q-table-row .q-table-cover-1by1,
.q-table-row[data-channelid] .q-table-fldmedia { max-width: 70px; min-width: 70px; padding-right: 0; }
.q-table-row .q-table-fldname { max-width: 100%; min-width: 200px; padding-left: 12px; flex-grow: 1; }
.q-table-row .q-table-createby { max-width: 150px; min-width: 150px; }
.q-table-row .q-table-updatedate { max-width: 130px; min-width: 130px; }
.q-table-row .q-table-createdate { max-width: 130px; min-width: 130px; }
.q-table-row .q-table-groupaction { max-width: var(--q-action-width); width: fit-content; width: -moz-fit-content; min-width: 135px; }
.q-table-row .q-table-groupaction.q-groupaction-mini { max-width: 80px ; width: 80px; width: -moz-fit-content; min-width: 80px; justify-content: flex-end; }
.q-table-row .q-table-groupaction .btnApprove,
.q-table-row .q-table-groupaction .btnReject { height: var(--btn-xs-height); }
.q-table .q-table-btn-option { min-width: var(--table-btn-option-width); width: var(--table-btn-option-width); height: var(--table-btn-option-height); padding: 0; color: var(--table-btn-option-color); }
.q-table .q-table-btn-option i { font-size: 24px; }
.q-table-filemedia-box { width: 100px; aspect-ratio: 16 / 9; }
.q-table-fldmedia img { width: 100px; aspect-ratio: 16 / 9; border: 1px solid rgba(216, 216, 216, 0.5); border-radius: 4px; }
.q-table-filemedia-box img { border: 1px solid rgba(216, 216, 216, 0.5); border-radius: 4px; width: 100px; aspect-ratio: 16 / 9; object-fit: cover; }
.q-table-fldmedia.q-embed-ratios-1by1 img,
[data-channelid] .q-table-filemedia-box img { max-width: 56px; aspect-ratio: 1 / 1; }
.q-table-avatar { width: 24px; height: 24px; display: flex; margin: auto;background-color: #9bb8d9; color: var(--white); font-weight: bold; border-radius: 50%; align-items: center; justify-content: center; text-transform: capitalize; }
.q-table-avatar img { border: 1px solid rgba(216, 216, 216, 0.5); border-radius: 50%; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.q-table .q-table-col-grow { flex-grow: 1; max-width: inherit; }
.q-table .q-table-groupaction .dropdown-menu { min-width: 100px; width: auto; max-width: 320px; }
.q-table .q-table-groupaction-divider { height: 24px; width: 1px; background-color: #E3E6E8;; }

/* Header Filter */
.d-header-filter { border-top: 1px solid #D7DADC; border-bottom: 1px solid #D7DADC; background-color: #FFF; padding: 16px 0 20px 0; margin-top: 20px; }
.d-filter-footer { display: flex; gap: 16px; }
.d-filter-footer .q-filter-btn-apply { min-width: 120px; }
.q-style .d-header-filter .input-group.q-input-group-datepicker { max-width: 100%;}

/* Table to Collapse */
.q-table-to-collapse .q-table { border: 1px solid #E3E6E8; border-radius: 4px; margin-top: 20px; overflow: var(--overlay); overflow-x: auto; }
.q-table-to-collapse .q-table-row-group { border: 0; box-shadow: none; border-radius: 0; border-top: 1px solid #E3E6E8; cursor: pointer; }
.q-table-to-collapse .q-table-row-group:hover,
.q-table-to-collapse .q-table-row-group:hover .q-table-col-fixed-right { background-color: #E3E6E8; }
.q-table-to-collapse .q-table-row.q-table-header {  background-color: #EFF2F4; position: sticky; }
.q-table-to-collapse .q-table-row.q-table-header .q-table-col { background-color: #EFF2F4; }
.q-table-to-collapse .q-table-row.q-table-header::before,
.q-table-to-collapse .q-table-row.q-table-header::after { display: none; }
.q-table-to-collapse .q-table-row .q-table-col, .q-table-to-collapse .HN{ padding: 11px 6px; font: var(--typo-body-md); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: normal; display: block; }
.q-table-to-collapse .q-table-row .q-table-col:first-child { padding-left: 16px; flex-grow: 1; max-width: inherit !important; }
.q-table-to-collapse .q-table-row .q-table-col:last-child { padding-right: 16px; }
.divWidgetPage .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col { padding-top: 7px; padding-bottom: 7px; }
.q-table-to-collapse .q-table-row { min-height: auto; margin: 0; }
.q-table-to-collapse .q-table-row.q-table-header + .HF + .q-table-row .q-table-row-group { border-top: 0; }
.q-table-to-collapse .q-table-empty { text-align: center; color: #545555; font: var(--typo-body-md);padding:8px; }
.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .divItemListNone{display: flex; }
.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .divItemListNone:not(.hide):not([style*="none"]){ flex-grow: 1; display: flex !important; align-items: center; justify-content: center; }
.q-table-to-collapse .q-table-col-group-action { display: flex; gap: 8px; margin: -3px 0; }

.divHomeSideList .q-table-to-collapse { border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden; }
.divHomeSideList .q-table-to-collapse .q-table { border: 0; margin: 0; border-radius: 0; max-height: 262px; }
.divHomeSideList .q-table-to-collapse .q-table-row-group { width: 100%; }
.divHomeSideList .q-table-to-collapse .q-table-col-group { flex-wrap: wrap; gap: 4px; padding: 8px 16px; min-height: 56px; width: 100%; }
.divHomeSideList .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col { padding: 0; height: auto; width: 100%; min-width: 100%; max-width: 100%; }
.divHomeSideList .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col:first-child { font-weight: bold !important; }
.divHomeSideList .q-table-to-collapse .q-table-row .q-table-col.q-mb-hide { display: none; }
.divHomeSideList .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col[data-fld="date"] { color: var(--secondary); }
.divHomeSideList .q-table-to-collapse .btn-collapse { width: 100%; background-color: #EFF2F4; height: 40px; justify-content: flex-start; border-radius: 0; border-top: 1px solid #E3E6E8; }
.divHomeSideList .q-table-to-collapse .btn-collapse i { margin-left: auto; color: #545555; }
.divHomeSideList .q-table-to-collapse .btn-collapse .title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.divHomeSideList .q-table-to-collapse .btn-collapse.active i { transform: scale(-1); }
.divHomeSideList .q-table-to-collapse .btn-collapse .badge { padding: 0; font: var(--btn-md-font); }
.divHomeSideList .q-table-to-collapse .btn-collapse .badge:empty { display: none; }
.divHomeSideList .q-table-to-collapse .btn-collapse .badge::before { content: '('; }
.divHomeSideList .q-table-to-collapse .btn-collapse .badge::after { content: ')'; }
.divHomeSideList .q-table-to-collapse .q-mb-hide { display: none; }
.divHomeSideList .q-table-to-collapse .row.q-pc-hide { display: flex;  }
.divHomeSideList .q-table-to-collapse .q-table-col-group-action { margin: 0; margin-top: 4px; }
.divHomeSideList .q-table-to-collapse .q-table-col-group-action .btn { height: var(--btn-sm-height) !important; padding: var(--btn-sm-padding) !important; min-width: var(--btn-sm-minwidth) !important; }
.divHomeSideList .q-table-to-collapse .q-table-row .q-table-col { padding-top: 11px; padding-bottom: 11px; }

/* Default Table */
.table-responsive { border: 1px solid #E3E6E8; border-radius: 4px; }
.q-table.table { margin: 0; }
.q-table.table thead th { padding: 10px 16px; border-top: 0; border-bottom-width: 1px; color: #545555; font: var(--typo-body-lg); }
.q-table.table thead tr { background-color: #EFF2F4; }
.q-table.table tbody td { padding: 6px 16px; border-color: #E3E6E8; vertical-align: middle; color: #545555; font: var(--typo-body-lg); }
.q-table.table tbody td .form-control { padding: var(--form-control-xs-padding); height: 28px; }

/* Scrollbar */
.q-style ::-webkit-scrollbar-track,
.q-style::-webkit-scrollbar-track { background-color: transparent; }
.q-style ::-webkit-scrollbar-thumb,
.q-style::-webkit-scrollbar-thumb { background-color: #CBCECF; border: 4px solid rgba(0, 0, 0, 0); border-radius: 100px; background-clip: padding-box; min-height: 80px; }
.q-style ::-webkit-scrollbar-thumb:hover,
.q-style::-webkit-scrollbar-thumb:hover { background-color: #A7A9AB; }
.q-style ::-webkit-scrollbar-button,
.q-style::-webkit-scrollbar-button { display:none; }
.q-style ::-webkit-scrollbar-corner,
.q-style::-webkit-scrollbar-corner { background-color: transparent; }
.q-style ::-webkit-resizer,
.q-style::-webkit-resizer { background-color: transparent; }
.q-style ::-webkit-scrollbar-button:start,
.q-style::-webkit-scrollbar-button:start { display: none; }
.q-style ::-webkit-scrollbar-button:end,
.q-style::-webkit-scrollbar-button:end { display: none; }
.q-style ::-webkit-scrollbar-track-piece,
.q-style::-webkit-scrollbar-track-piece { display: none; }

/* Spinner */
.q-style .spinner-border { margin: 10px 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }

/* Progress */
.q-style .progress { width: 100%; margin-right: 8px; border-radius: 6px; height: 10px; background: #D7DADC; }
.q-style .progress-bar { background: #303031; border-radius: 6px; }
.q-style .q-text-percen { font-size: 12px; color: #2E2E2E; font-weight: bold; }

/* Checkbox / Radio */
.q-style .custom-control-label::before { 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; }
.q-style .custom-control.custom-checkbox,
.q-style .custom-control.custom-radio { display: flex; align-items: center; text-align: left; justify-content: flex-start; align-items: baseline; padding: 0; align-self: flex-start; }
.q-style .custom-control.custom-checkbox .custom-control-label,
.q-style .custom-control.custom-radio .custom-control-label { display: flex; gap: 4px; align-items: flex-start; }
.q-style .custom-control-input ~ .custom-control-label::before { line-height: inherit; border: 0; color: #A7A7A7; background-color: transparent; width: auto; height: auto; font-size: 24px; box-shadow: none; position: unset; transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; line-height: 24px; }
.q-style .custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: transparent; color: #A7A7A7; }
.q-style .custom-control-input[type="checkbox"] ~ .custom-control-label::before { content: '\e922'; }
.q-style .custom-checkbox .custom-control-input[type="checkbox"] ~ .custom-control-label::after { display: none; }
.q-style .custom-control-input[type="checkbox"]:checked ~ .custom-control-label::before { content: '\e921'; background-color: transparent; color: var(--secondary-txt); }
.q-style .custom-control-input[type="radio"] ~ .custom-control-label::before { content: '\e91f'; }
.q-style .custom-radio .custom-control-input[type="radio"] ~ .custom-control-label::after { display: none; }
.q-style .custom-control-input[type="radio"]:checked ~ .custom-control-label::before { content: '\e91e'; background-color: transparent; color: var(--secondary-txt); }
.q-style .custom-control-input:disabled, 
.q-style .custom-control-input[disabled] { cursor: default !important; }
.q-style .custom-control-input:disabled ~ .custom-control-label::before, 
.q-style .custom-control-input[disabled] ~ .custom-control-label::before { opacity: 0.3; cursor: default; }
.q-style .custom-control.custom-checkbox [type="checkbox"].custom-control-input:not(:checked)[disabled] ~ .custom-control-label::before{ content: '\e922'; }
.q-style .custom-control.custom-radio [type="radio"].custom-control-input:not(:checked)[disabled] ~ .custom-control-label::before{ content: '\e91f'; }
.q-style .custom-control-label .custom-control-img { width: 24px; height: 24px; overflow: hidden; border-radius: 50%; margin-right: 8px; border: 1px solid var(--border-light); }
.q-style .custom-control-input ~ .custom-control-label span { margin-top: 2px; }

/* Password */
.q-style .input-group .form-control[type="password"] { transition: none; }
.q-style .input-group .form-control[type="password"]:not(:placeholder-shown) { font: large Verdana,sans-serif; letter-spacing: 1px; }

/* Hide modal backdrop */
.modal-open .modal-backdrop { display: none; }

/* Modal */
.modal,
.q-style.modal { background: rgb(0 0 0 / 50%); }
.q-style .modal-footer { border: 0; padding: 14px 20px; gap: 16px; }
.q-style .modal-footer  > * { margin: 0; }
.q-style .modal-footer.border-top { border-color: #D7DADC; }
.q-style .modal-content { border: 0; }
.q-style .modal-sm { max-width: 400px; }
.q-style .modal-md { max-width: 640px; }
.q-style .modal-lg { max-width: 800px; }
.q-style .modal-header { padding: 16px 20px; }
.q-style .modal-header .close { margin: 0; opacity: 1; font-size: 16px; margin-left: auto; color: #848586; padding: 0; }
.q-style .modal-body hr { border-color: #E2E3E7; }
.q-style .modal-dialog { padding: 16px; }
.q-style#divModalAuth .modal-dialog{ padding: 0; }
.q-style .modal-body { padding: 24px var(--padding-modal-body-left-right) 32px; overscroll-behavior: contain; }

/* Toast */
.q-toast{z-index: 9999; top: 0;left: 50%; transform: translateX(-50%) translateY(-100%); }
.toast { opacity: 1; padding: 12px 10px; margin: 0 16px; display: flex; gap: 12px; background: #545555; box-shadow: 0px 2px 4px rgb(0 0 0 / 10%); border-radius: 4px; width: 300px; min-height: 48px; color: #ffffff; align-items: flex-start; font: var(--typo-body-lg); }
.toast span.txtMesg { flex-grow: 1; }
.toast::before { font-size: 28px; 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; }
.toast.d-noti-info::before { content: "\e919"; margin: -4px 0; color: #1774E3; }
.toast.d-noti-fail::before { content: "\e9b6"; margin: -4px 0; color: #BE2121; }
.toast.d-noti-warn::before { content: "\e91b"; margin: -4px 0; color: #F3BE00; }
.toast.d-noti-done::before { content: "\e91c"; margin: -4px 0; color: #009529}
.toast.d-noti-export::before { content: "\e974"; margin: -4px 0; color: #1774E3; }
.toast .btnDone { display: flex; align-items: center; font-size: 18px; cursor: pointer; 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; color: #303031; }
.toast .btnDone:before { content: "\e90c"; }
.toast.status:not([style*="none"]){animation: Qtoast 0.2s ease-in-out; border: 1px solid; box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.15); gap: 8px; transform: translateY(calc(100% + 20px)); opacity: 1; word-break: break-word; }
.toast.status[style*="none"] { display: flex !important; transform: translateY(-6px); transition: all 0.2s ease-in-out; }
.toast.status{color: #303031;border-color: #303031; }
.toast.d-noti-info { background-color: #BEDCFF; border-color: #00295B; color: #001A3A; }
.toast.d-noti-done { background-color: #CCFFDA; border-color: #005818; color: #005818; }
.toast.d-noti-warn { background-color: #FFEEAF; border-color: #271F00; color: #540000; }
.toast.d-noti-fail { background-color: #FFCCCC; border-color: #540000; color: #540000; }
.toast.d-noti-export { background-color: #BEDCFF; border-color: #00295B; color: #001A3A; }

.q-toast .q-uploadfile-uploading-container { flex-direction: column; align-items: flex-start; }
.q-toast .q-uploadfile-uploading-container .progress { width: 100%; max-width: 180px; max-height: 6px; background-color: #A7A9AB; }
.q-toast .q-uploadfile-uploading-container .progress-bar { background-color: #00295B; } 
.q-layout-page.blockAction { position: relative; }
.q-layout-page.blockAction:before { content: ""; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: transparent; z-index: 2; }

.toast.d-noti-export .q-uploadfile-uploading-percent { font-size: 14px; font-weight: normal; color: #001A3A; margin-bottom: 10px;}
.toast.d-noti-export .progress { background: #A7A9AB; height: 6px; font-size: 0;}
.toast.d-noti-export .progress-bar { background: #00295B; border-radius: .25rem;}

@keyframes Qtoast {
	from { transform: translateY(0); opacity: 0; }
}

/* Embed */
.q-style .embed-responsive .embed-responsive-item, 
.q-style .embed-responsive embed, 
.q-style .embed-responsive object, 
.q-style .embed-responsive video { overflow: var(--overlay); }
.q-style .embed-responsive video { background: #000000; }

/* Cards */
.q-style .card { border: 1px solid #E3E6E8; border-radius: 8px; height: 100%; position: relative; }
.q-style .card:hover { box-shadow: 0px 2px 6px rgb(0 0 0 / 20%); }
.q-style .card .card-img,
.q-style .card .card-img-top,
.q-style .card .card-img-top img { width: 100%; aspect-ratio: 16/9; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.q-style .card .card-img-top img { border-bottom: 1px solid rgba(215, 218, 220, 0.5); }
.q-style .card-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 112px; }
.q-style .card-title { font: var(--typo-bold-body-lg); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; }
.q-style .card-text { font: var(--typo-body-md); }
.q-style .card-body .btn { align-self: flex-start; margin-top: auto; }
.q-style [data-toggle="collapse"] + div > .card-body,
.q-style .collapse .card-body { min-height: 0px; }
.q-style .card-text-list { display: flex; flex-direction: column; gap: 0px; }
.q-style .card-text-list li { display: flex; align-items: center; padding: 0px 0px 0px 4px; gap: 8px; font: var(--typo-body-md); color: var(--secondary-txt); }
.q-style .card-text-list li.q-course-overdue { color: var(--tag-danger);}
.q-style .card-text-list li:empty { display: none; }
.q-style .card-text-list li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-style .card-text-list i { font-size: 16px; }
.divCourseItem .card-body .divCntContent { margin-top: auto;}
.q-style .card-btn-group { display: flex; gap: 12px 16px; margin-top: auto; padding-top: 24px; margin-bottom: 8px; flex-wrap: wrap; }
.q-style .card-noted { font: var(--typo-body-md); }
.q-style .card-noted-bottom { bottom: 4px; font: var(--typo-body-md); position: absolute; white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 32px); overflow: hidden; }

.q-style .q-widget-pagination { margin-top: auto; padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: center; gap: 16px; align-items: center; color: #848586; font: var(--typo-body-lg); }

/* Tooltips */
.tooltip.show { opacity: 1; }
.tooltip-inner { font: var(--typo-body-md); padding: 6px 8px; line-height: 16px !important; border-radius: 4px; background-color: #1E1E1E; }
#divPortal .tooltip-inner { text-align: left; }
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
.bs-tooltip-bottom .arrow::before { border-bottom-color: #1E1E1E; }

/* Carousel */
.q-style .q-slide { background-color: transparent; margin-top: 20px; margin-bottom: 0; border-radius: 4px; overflow: hidden; box-shadow: 0px 2px 6px rgb(0 0 0 / 20%); }
.q-style .carousel-inner { height: 100%; }
.q-style .carousel-item { height: 100%; background-color: #505050; }
.q-style .carousel-item img { height: 100% !important; position: absolute; object-fit: cover; object-position: center; }
.q-style .carousel-item [data-fld="titleText"] { font: var(--typo-mont-page-subtitle); width: 60%; margin: 0; }
.q-style .carousel-item [data-fld="subtitleText"] { font: var(--typo-section-title); font-weight: normal !important; width: 60%; margin: 0; }
.q-style .carousel-item .btn { min-width: 160px; height: 36px; font: var(--typo-section-title); margin-top: 12px; }
.q-style .carousel-indicators li { width: 8px; height: 8px; max-width: 8px; max-height: 8px; background-color: #FFF; opacity: 0.5; margin: 0; border: 0; border-radius: 50%; padding: 0; text-indent: inherit; font-size: 0; justify-content: center; align-items: center; display: flex; }
.q-style .carousel-indicators li.active { opacity: 1; }
.q-style .carousel-indicators li::before { content: ''; width: 16px; height: 16px; display: block; position: absolute; }
.q-style .carousel-indicators { width: fit-content; background: rgba(0, 0, 0, 0.4); border-radius: 8px; gap: 8px; padding: 2px; height: 12px; margin: auto; bottom: 12px; align-items: center; }
.q-style .carousel-control-next { right: 8px; }
.q-style .carousel-control-prev { left: 8px; }
.q-style .carousel-control-next, 
.q-style .carousel-control-prev { width: var(--btn-md-height); opacity: 1; top: 50%; margin-top: -16px; background: rgba(0, 0, 0, 0.4) !important; z-index: 11; }
.q-style .carousel-caption { bottom: 0; top: 0; padding: 36px 64px; max-width: 100%; width: 100%; transform: translateX(-50%); left: 50%; right: inherit; display: flex !important; flex-direction: column; text-align: unset; gap: 8px; justify-content: center; }

.q-page[pg="CoursePlay"] { background-color: #FFFFFF; }
[pg="CoursePlay"] .q-layout-page .container-fluid { padding: 0; height: 100%; }
[pg="CoursePlay"] .q-layout-page { border-top: 1px solid #CBCECF; }
.q-course-detail { display: flex; align-items: flex-start; height: 100%;  }
.q-course-detail .q-course-detail-right { padding: 0; width: 330px; min-width: 330px; position: sticky; top: 0; bottom: 0; height: 100% !important; border-left: 1px solid #CBCECF; overflow: auto; }
.q-course-detail .list-group { border-radius: 0; }
.q-course-detail .list-group-item { padding: 0; border-top: 0; border-left: 0; border-right: 0; background-color: transparent; display: flex; flex-direction: column; }
.q-course-detail .list-group-item+.list-group-item.active { margin: 0; }
.q-course-detail [data-toggle="collapse"]+.collapse .card.card-body,
.q-course-detail [data-toggle="collapse"]+.collapsing .card.card-body { border: 0; border-radius: 0; background-color: transparent; padding: 0; box-shadow: none; }
.q-course-detail .list-group-item .btn { width: 100%; justify-content: unset; gap: 8px; padding: 6px 16px 6px 12px; /* min-height: 52px;*/ height: auto; text-align: left; align-items: flex-start; }
.q-list-class-status,
.q-list-session-status { display: flex; }
.q-list-class-status i,
.q-list-session-status i {font-size: 20px; min-width: 20px; }
.q-list-group-item-content { flex-grow: 1; }
.q-list-group-item-arrow { font-size: 16px; }
.q-course-detail .list-group-item .btn[aria-expanded="false"] .q-list-group-item-arrow { transform: rotate(180deg); }
.q-list-group-item-info { color: #848586; }
.q-course-detail .collapse .card.card-body .list-group-item,
.q-course-detail .collapsing .card.card-body .list-group-item { cursor: pointer; flex-direction: row; border: 0; padding: 6px 16px 6px 12px; gap: 8px; /*min-height: 52px;*/ font: var(--typo-body-md); }
.q-course-detail .collapse .card.card-body .list-group-item.active,
.q-course-detail .collapsing .card.card-body .list-group-item.active { color: inherit; background-color: #E3E6E8; }

.q-list-session-item.completed .q-list-session-status { color: var(--success); }
.q-list-class-item.completed .q-list-class-status i:before { content: '\e921'; }
.q-list-session-item.completed .q-list-session-status i:before { content: '\e91c'; }
.q-list-session-item.blockcontent i { color: #FFCD15; }
.q-list-session-item.blockcontent i:before { content: '\e9b6'; }

.q-list-group-item-groupname { display: flex; justify-content: space-between; }
.q-coursedetail-btn-chatwithexpert { margin-left: 16px; }

.q-course-detail-left { align-self: stretch; }
.q-course-detail-left .container { max-width: 900px; padding: 0 24px; }
.q-coursecontent-header { display: flex; flex-direction: column; padding: 16px; }
.q-coursecontent-resources { font: var(--typo-section-title); margin-bottom: 4px; }
.q-coursecontent-progress { display: flex; justify-content: space-between; align-items: center; }
.q-coursecontent-progress-label { font: var(--typo-body-md); white-space: nowrap; }
.q-coursecontent-progress .progress { max-width: 180px; color: #303031; }
.q-list-group-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 12px 16px; }
.q-list-group-header-label { text-transform: uppercase; color: #848586; font: var(--typo-body-md); }

.q-course-detail-screen { background-color: #000000; display: flex; justify-content: center; max-height: 500px; aspect-ratio: 16/9; width: 100%; border-bottom: 1px solid #CBCECF; }
.Fullscreen .q-course-detail-screen { border-bottom: 0; }
.q-course-detail-screen .embed-responsive { aspect-ratio: 16/9; width: auto; background-color: #FFFFFF; height: 100%; max-height: 500px; }
.Fullscreen .q-course-detail-screen .embed-responsive { max-height: unset; }
.q-course-screen-body { padding: 24px; }
.q-course-detail-left .nav-tabs { margin-bottom: 24px; overflow: visible; }
.q-course-detail-content { /*border-top: 1px solid #CBCECF;*/ padding-top: 24px }

[content-type="scorm"] .q-course-detail-screen .embed-responsive { width: 100%; }

.q-course-screen-body { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; }
.q-course-screen-cover { width: 284px; margin-bottom: 24px; }
.q-course-screen-cover img { width: 284px; border: 1px solid rgba(216, 216, 216, 0.5); border-radius: 8px; }
.q-course-screen-title { font: var(--typo-section-title); margin-top: 4px; }
.q-course-screen-desc { font: var(--typo-body-lg); }

.divSUMMARY .q-course-screen-body { align-items: center; height: 100%; justify-content: center; }
.q-course-screen-summary-score { font: var(--typo-body-lg); }
.q-course-screen-summary-totalscore { font-weight: bold; color: var(--primary); }

.divPageSession .q-course-screen-body { max-width: 408px; width: 100%; margin: 0 auto; height: 100%; justify-content: center; color: #FFFFFF; font: var(--typo-body-md); }
.divPageSession::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; }
.divPageSession .form-row { flex-wrap: nowrap; gap: 8px; margin: 0; margin-top: 2px; }
.divPageSession .form-row .form-label { white-space: nowrap; color: #A7A9AB; margin: 0; }
.q-course-screen-session-classname { font: var(--typo-body-md); }
.q-course-screen-session-sessionname { font: var(--typo-section-title); margin-bottom: 4px; }
.q-course-screen-session-btn-checkin { width: 100%; margin-top: 24px; }
.q-course-screen-session-checkindesc { margin-top: 16px; }
.q-course-screen-coverbg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.btn.q-list-group-btn-expandall{border-color: transparent !important; padding-right: 0; background: transparent !important; text-decoration: underline; font-weight: 400; }
.btn.q-list-group-btn-expandall:hover {color: var(--dark-hover-txt); }

/* Table to Collapse */
.q-table-normal.q-table { border: 1px solid #E3E6E8; border-radius: 4px; overflow: var(--overlay); padding-bottom: 8px; min-height: 150px; }/*ใส่ min-height > support dropdown แบบ HI แถวเดียว*/
.q-table-normal .q-table-row-group { border: 0; box-shadow: none; border-radius: 0; border-top: 1px solid #E3E6E8; cursor: pointer; }
.q-table-normal .q-table-row-group:hover .q-table-col.q-table-col-fixed-right,
.q-table-normal .q-table-row-group:hover .q-table-col.q-table-col-fixed-left,
.q-table-normal .q-table-row-group:hover { background-color: #E3E6E8; transition: all 0.3s ease-in-out; }
.q-table-normal .q-table-row.q-table-header {  background-color: #EFF2F4; position: sticky; }
.q-table-normal .q-table-row.q-table-header .q-table-col { background-color: #EFF2F4; display: flex; align-items: center; }
.q-table-normal .q-table-row.q-table-header .q-table-col span { display: block; width: 100%; text-overflow: ellipsis; overflow: hidden; }
.q-table-normal .q-table-row.q-table-header::before,
.q-table-normal .q-table-row.q-table-header::after { display: none; }
.q-table-normal .q-table-row .q-table-col { padding: 7px 18px; font: var(--typo-body-md); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: block; /*height: 40px;*/ }
.q-table-normal .q-table-row:not(.q-table-header) .q-table-col { font: var(--typo-body-lg); }
.q-table-normal .q-table-row .q-table-col:first-child { padding-left: 16px; flex-grow: 1; max-width: inherit !important; }
.q-table-normal .q-table-row .q-table-col:last-child { padding-right: 16px; }
.q-table-normal .q-table-row .q-table-row-group .q-table-col { padding-top: 7px; padding-bottom: 7px; display: flex; }
.q-table-normal .q-table-row { min-height: auto; margin: 0; }
.q-table-normal .q-table-row.q-table-header + .HF + .q-table-row .q-table-row-group { border-top: 0; }
.q-table-normal .q-table-empty { padding: 112px 0; text-align: center; color: #545555; font: var(--typo-body-md); }
.q-table-normal .q-table-col-group-action { display: flex; gap: 8px; margin: -3px 0; }
.q-table-normal .q-table-col-fixed-right.q-table-groupaction { overflow: unset; }
.q-table-row.HI.active { position: relative; z-index: 3; }
.q-table-normal .select2-container--default .select2-selection--single .select2-selection__arrow b { font-size: 24px; }

.q-form .alert { font-size: 12px; line-height: 16px; padding: 12px 20px; }
.q-form .alert.q-alert-form { margin: 16px 16px 0; }
.alert-warning { color: #242425; }

/* modal terms and conditions */
#divModalAuth.q-store .modal-dialog { max-width: 640px; }
.q-style #exampleModalLong .modal-body { padding: 24px 20px 32px; text-align: left; }
.q-hightlight {font-weight: bold;margin-bottom: 24px; }

.q-table-fldname,
.q-table-catname,
.q-table-col.fld_name,
.q-table-col.fld_cname { white-space: pre-wrap;}
.q-table-col .q-white-space-pre.q-ellipsis { white-space: pre;}


/* pc only */
@media (min-width: 769px){
	.q-style ::-webkit-scrollbar,
	.q-style::-webkit-scrollbar { width: 16px; height: 16px; }
}

@media (max-width: 1200px) {
	.q-course-detail-screen .embed-responsive{ width: 100%; } 
}
@media (max-width: 992px) {
	.q-course-detail { flex-direction: column; height: auto; }
	.q-course-detail .q-course-detail-right, .q-course-detail-screen .embed-responsive{ width: 100%; max-height: 100%; } 
}
@media (max-width: 768px) {
	:root {
		--lookup-option-default-amount: 5;
		--form-control-font: normal 16px/24px var(--font-family-body);
		--form-control-height: 44px;
		--dropdown-option-maxheight:300px;
		
		--form-label: bold 16px/24px var(--font-family-body);

		--lookup-option-padding: 8px 10px;
		--lookup-option-maxheight: calc((44px * var(--lookup-option-default-amount)));
		--lookup-option-btn-height: 32px;
		--lookup-option-btn-font: normal 14px/20px var(--font-family-body);

		--dropdown-option-font: normal 16px/24px var(--font-family-body);

	}

	.q-style .input-group .dropdown-menu .HA{padding: 8px 0; }
	.dropdown-menu .q-lookupdropdown-btn-add { height: 44px; font: bold 16px/22px var(--font-family-body); }

	.q-uploadfile-noted { font-size: 14px; line-height: 20px; }
	.q-uploadfile-upload { max-width: 300px; }

	.q-style .input-group-append .btn { min-width: 44px; }

	/* .q-style .q-input-group-search .form-control { height: 30px; }
	.q-style .form-row .q-input-group-search .form-control { height: calc(var(--form-control-height) - 2px); }
	.q-style .q-header-left .form-row .q-input-group-search .form-control { height: 30px; } */

	.q-uploadfile,
	.q-upload-cover { flex-direction: column; margin-top: -4px; }
	.q-uploadfile-action { margin: 0; margin-left: -8px; margin-top: -2px; gap: 4px 6px; }
	.q-style .q-uploadfile-action .q-upload-btn-remove, 
	.q-style .q-uploadfile-action .q-upload-btn-replace { font-size: 14px; line-height: 20px; }

	.q-style .custom-control-input ~ .custom-control-label::before { font-size: 32px; line-height: 32px; }
	.q-style .custom-control.custom-checkbox .custom-control-label, 
	.q-style .custom-control.custom-radio .custom-control-label { font-size: 14px; line-height: 20px; }
	.q-style .custom-control.custom-checkbox .custom-control-label > * , 
	.q-style .custom-control.custom-radio .custom-control-label > * { padding-top: 4px; }

	.q-style .form-group .text.text-secondary { margin-top: 6px; font-size: 14px; line-height: 20px; }

	.q-style .input-group.q-input-group-datepicker .dropdown-menu { min-width: 280px; max-height: unset; }

	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse,
	.divHomeMainList .q-table-to-collapse { border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden; flex-grow: 1; display: flex; flex-direction: column; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table,
	.divHomeMainList .q-table-to-collapse .q-table { border: 0; margin: 0; border-radius: 0; max-height: 262px; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-row-group,
	.divHomeMainList .q-table-to-collapse .q-table-row-group { width: 100%; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-col-group,
	.divHomeMainList .q-table-to-collapse .q-table-col-group { flex-wrap: wrap; gap: 4px; padding: 8px 16px; min-height: 56px; width: 100%; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col,
	.divHomeMainList .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col { padding: 0; height: auto; width: 100%; min-width: 100%; max-width: 100%; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col:first-child,
	.divHomeMainList .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col:first-child { font-weight: bold !important; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-row .q-table-col.q-mb-hide,
	.divHomeMainList .q-table-to-collapse .q-table-row .q-table-col.q-mb-hide { display: none !important; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col[data-fld="date"],
	.divHomeMainList .q-table-to-collapse .q-table-row .q-table-row-group .q-table-col[data-fld="date"] { color: var(--secondary); }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse,
	.divHomeMainList .q-table-to-collapse .btn-collapse { width: 100%; background-color: #EFF2F4; height: 40px; justify-content: flex-start; border-radius: 0; border-top: 1px solid #E3E6E8; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse[data-tab="Marking"],
	.divHomeMainList .q-table-to-collapse .btn-collapse[data-tab="Marking"] { border-top: 0; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse i,
	.divHomeMainList .q-table-to-collapse .btn-collapse i { margin-left: auto; color: #545555; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse .title,
	.divHomeMainList .q-table-to-collapse .btn-collapse .title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse.active i,
	.divHomeMainList .q-table-to-collapse .btn-collapse.active i { transform: scale(-1); }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse .badge,
	.divHomeMainList .q-table-to-collapse .btn-collapse .badge { padding: 0; font: var(--btn-md-font); }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse .badge:empty,
	.divHomeMainList .q-table-to-collapse .btn-collapse .badge:empty { display: none; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse .badge::before,
	.divHomeMainList .q-table-to-collapse .btn-collapse .badge::before { content: '('; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .btn-collapse .badge::after,
	.divHomeMainList .q-table-to-collapse .btn-collapse .badge::after { content: ')'; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-mb-hide,
	.divHomeMainList .q-table-to-collapse .q-mb-hide { display: none; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .row.q-pc-hide,
	.divHomeMainList .q-table-to-collapse .row.q-pc-hide { display: flex;  }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-col-group-action,
	.divHomeMainList .q-table-to-collapse .q-table-col-group-action { margin: 0; margin-top: 4px; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-col-group-action .btn,
	.divHomeMainList .q-table-to-collapse .q-table-col-group-action .btn { height: var(--btn-sm-height) !important; padding: var(--btn-sm-padding) !important; min-width: var(--btn-sm-minwidth) !important; }
	.divWidgetPage[pg="widget:mytasks"] .q-table-to-collapse .q-table-row .q-table-col,
	.divHomeMainList .q-table-to-collapse .q-table-row .q-table-col { padding-top: 11px; padding-bottom: 11px; }

	/* modal change to page */
	.q-style .modal-header .close { border: 1px solid var(--secondary-txt); color: var(--secondary-txt); margin-right: 8px; }
	.q-style .modal-title { font: var(--typo-section-title)}
	.q-style .modal-header { padding: 12px 20px; }
	.q-style .modal-body { padding: 16px var(--padding-modal-body-left-right) 20px; }

	.modal-open .modal { overflow: hidden; }
	.modal-fullscreen-md-down.modal-dialog { width: 100vw; max-width: none !important; height: 100%; margin: 0; padding: 0; max-height: 100%; }
	.modal-fullscreen-md-down .modal-content { height: 100%; border: 0; border-radius: 0; }
	.modal-fullscreen-md-down .modal-body { overflow-y: auto; }

	.q-modal-responsive-header.modal .modal-header { justify-content: flex-start; align-items: center; }
	.q-modal-responsive-header.modal .modal-header .close { margin: 0; order: -1; margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; vertical-align: baseline; gap: 4px; height: 32px; padding: 0; font: var(--btn-md-font); white-space: nowrap; min-width: 32px; background-color: #FFF; border: 1px solid; border-color: var(--secondary); color: var(--secondary-txt); transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; }
	.q-modal-responsive-header.modal .modal-header .close i { font-size: var(--ico-size-20) !important; min-width: var(--ico-size-20) !important; max-width: var(--ico-size-20) !important; }
}

/* support max height screen short */
@media (max-height: 610px) {
	:root {
		--lookup-option-default-amount: 4;
	}
}