:root,
html[data-theme="light"] {
/*----- Colors ----- */
color-scheme: light;
--ff-primary: "Segoe UI", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--color-bg-page: #FFFFFF;
--color-bg-surface: #FFFFFF;
--color-bg-subtle: #f1f1f1;
--color-bg-muted: #f8f9fa;
--color-text-primary: #202020;
--color-text-secondary: #646464;
--color-text-muted: #999999;
--color-text-on-accent: #FFFFFF;
--color-border-default: #DEDEDE;
--color-border-subtle: #E5E5E5;
--color-overlay-login: rgba(255, 255, 255, 0.60);
--color-static-white: #FFFFFF;
--color-static-black: #000000;
--color-border-control: #CCCCCC;
--color-border-input: #CED4DA;
--color-focus-ring: #0A58CA;
--color-brand-konfx-orange: #F69B38;
--color-brand-microsoft: #0078D4;
--nav-bg: #212121;
--nav-control-border: rgba(255, 255, 255, 0.22);
--nav-control-hover-bg: rgba(255, 255, 255, 0.12);
--nav-control-hover-border: rgba(255, 255, 255, 0.38);
--dashboard-bg: var(--color-bg-page);
--dashboard-tile-bg: transparent;
--dashboard-tile-border: transparent;
--dashboard-tile-hover-bg: var(--color-bg-surface);
--dashboard-tile-hover-border: var(--border-color);
--dashboard-tile-shadow: rgba(0, 0, 0, 0) 0px 6px 12px -2px, rgba(0, 0, 0, 0) 0px 3px 7px -3px;
--dashboard-tile-hover-shadow: rgba(50, 50, 93, 0.15) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px;
--shadow-dropdown: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
--shadow-offcanvas: rgba(149, 157, 165, 0.2) -8px 0px 24px, rgba(149, 157, 165, 0.2) 8px 0px 24px;
--shadow-card-lg: 0px 12px 42px 0px rgba(0, 0, 0, 0.1);
--shadow-card: rgba(0, 0, 0, 0.1) 0px 4px 12px;
--shadow-card-strong: rgba(0, 0, 0, 0.2) 0px 4px 12px;
--shadow-panel: 0 0 10px rgba(0, 0, 0, 0.1);
--auth-provider-google-bg: #FFFFFF;
--auth-provider-google-hover-bg: #F5F5F5;
--auth-provider-google-text: #202020;
--loading-spinner-track: rgba(200, 16, 46, 0.25);
--loading-spinner-active: rgba(200, 16, 46, 1);
--alert-danger-bg: var(--danger-bg-subtle);
--alert-success-bg: #E8FFE8;
--alert-info-bg: #f4fbfd;
--footer-bg: #333333;
--file-display-bg: rgba(241, 241, 241, 1);
--azure-validation-color: #a4262c;
--review-strong-color: #242424;
--breadcrumb-hover-bg: #F5F5F5;
--breadcrumb-separator-color: #9aa0a6;
--event-logo-bg: #eef6fc;
--event-logo-border: #d9ecfb;
--event-logo-placeholder-color: #9ca3af;
--avatar-text-color: var(--color-text-on-accent);
--notice-warning-accent: var(--warning-color);
--notice-warning-bg: var(--warning-bg-subtle);
--notice-warning-text: var(--warning-text-emphasis);
--toolbar-disabled-color: var(--color-text-muted);
--toolbar-disabled-icon-color: var(--color-text-muted);
--toast-close-filter: none;
--table-sort-icon-filter: none;
/*Body*/
--body-color: var(--color-text-primary);
--body-bg: var(--color-bg-page);
/*Secondary*/
--secondary-color: var(--color-text-primary);
--secondary-bg: #DEDEDE;
/*Tertiary*/
--tertiary-color: var(--color-text-secondary);
--tertiary-bg: var(--color-bg-subtle);
/*Emphasis*/
--emphasis-color: #000;
/*Border*/
--border-color: var(--color-border-default);
/*Primary*/
--primary-color: #C8102E;
--primary-bg-subtle: #F4CFD5;
--primary-bg-soft: #FFF5F7;
--primary-bg-muted: #FCE7EB;
--primary-border-subtle: #E9A7B3;
--primary-text-emphasis: #C8102E;
--primary-text-color: var(--primary-text-emphasis);
--primary-color-hover: #9E1027;
--primary-color-active: #8F0B20;
/*Success*/
--success-color: #0f5132;
--success-bg-subtle: #CEFACE;
--success-border-subtle: #BADBCC;
--success-text-emphasis: #146C43;
/*Danger*/
--danger-color: #FF0000;
--danger-bg-subtle: #fef0f1;
--danger-border-subtle: #F5C2C7;
--danger-text-emphasis: #D13438;
/*Warning*/
--warning-color: #cc9800;
--warning-bg-subtle: #FFF8E1;
--warning-border-subtle: #FFE082;
--warning-text-emphasis: #996F00;
/*Info*/
--info-color: #005585;
--info-bg-subtle: #c7ebff;
--info-border-subtle: #B6EFFB;
--info-text-emphasis: #006CA8;
/*Light*/
--light-color: #F1F1F1;
--light-bg-subtle: var(--color-bg-surface);
--light-border-subtle: var(--color-border-subtle);
--light-text-emphasis: var(--color-text-secondary);
/*Dark*/
--dark-color: #212121;
--dark-bg-subtle: #DEDEDE;
--dark-border-subtle: #BDBDBD;
--dark-text-emphasis: #222222;
--white-color: var(--color-bg-surface);
--secondary-text-color: var(--secondary-color);
--tertiary-text-color: var(--tertiary-color);
--tertiary-text-emphasis: var(--tertiary-color);
--dark-emphasis-text: var(--dark-text-emphasis);
--surface-control-bg: var(--color-bg-surface);
--surface-control-addon-bg: var(--secondary-bg);
--surface-neutral-hover: #EDEBE9;
--surface-disabled: #e9ecef;
--surface-chart-overlay: rgba(255, 255, 255, 0.8);
--overlay-login-bg: var(--color-overlay-login);
--theme-light-preview-bg: #FFFFFF;
--theme-light-preview-border: #DEDEDE;
--theme-light-preview-text: #202020;
--theme-dark-preview-bg: #111318;
--theme-dark-preview-border: #4B5565;
--theme-dark-preview-text: #EEF2F7;
/*Table Rows*/
--table-row-hover-bg: var(--primary-bg-soft);
--table-row-selected-bg: var(--primary-bg-muted);
--table-row-selected-color: var(--body-color);
--table-row-disabled-bg: transparent;
--table-row-disabled-hover-bg: var(--table-row-hover-bg);
--form-select-caret-icon: url("../icon/Misc/angle-small-down-black.svg");
/* Legacy literal color tokens centralized during Admin theme migration. */
--legacy-color-hex-000: #000;
--legacy-color-hex-000000: #000000;
--legacy-color-hex-004aad: #004AAD;
--legacy-color-hex-005585: #005585;
--legacy-color-hex-0078d4: #0078D4;
--legacy-color-hex-007bff: #007bff;
--legacy-color-hex-030509: #030509;
--legacy-color-hex-080b11: #080b11;
--legacy-color-hex-0a58ca: #0a58ca;
--legacy-color-hex-0d6efd: #0d6efd;
--legacy-color-hex-0f172a: #0f172a;
--legacy-color-hex-0f5132: #0f5132;
--legacy-color-hex-0f7a4e: #0f7a4e;
--legacy-color-hex-111827: #111827;
--legacy-color-hex-115ea3: #115ea3;
--legacy-color-hex-139b62: #139b62;
--legacy-color-hex-151b27: #151b27;
--legacy-color-hex-15803d: #15803d;
--legacy-color-hex-161c28: #161c28;
--legacy-color-hex-16a34a: #16a34a;
--legacy-color-hex-17202a: #17202a;
--legacy-color-hex-18202b: #18202b;
--legacy-color-hex-1f2937: #1f2937;
--legacy-color-hex-1f75d8: #1f75d8;
--legacy-color-hex-202020: #202020;
--legacy-color-hex-212121: #212121;
--legacy-color-hex-222222: #222222;
--legacy-color-hex-242424: #242424;
--legacy-color-hex-252f3a: #252f3a;
--legacy-color-hex-28a745: #28a745;
--legacy-color-hex-2f394b: #2f394b;
--legacy-color-hex-323130: #323130;
--legacy-color-hex-333: #333;
--legacy-color-hex-334155: #334155;
--legacy-color-hex-374151: #374151;
--legacy-color-hex-39d98a: #39d98a;
--legacy-color-hex-3a0647: #3a0647;
--legacy-color-hex-3c485b: #3c485b;
--legacy-color-hex-404040: #404040;
--legacy-color-hex-475467: #475467;
--legacy-color-hex-475569: #475569;
--legacy-color-hex-4f607d: #4f607d;
--legacy-color-hex-5f6368: #5f6368;
--legacy-color-hex-616b76: #616b76;
--legacy-color-hex-6264a7: #6264A7;
--legacy-color-hex-646464: #646464;
--legacy-color-hex-64748b: #64748b;
--legacy-color-hex-667085: #667085;
--legacy-color-hex-68727d: #68727d;
--legacy-color-hex-6b7280: #6b7280;
--legacy-color-hex-7a838d: #7a838d;
--legacy-color-hex-7c2d12: #7c2d12;
--legacy-color-hex-7c8aa5: #7c8aa5;
--legacy-color-hex-808080: #808080;
--legacy-color-hex-842029: #842029;
--legacy-color-hex-8e98a6: #8e98a6;
--legacy-color-hex-94a3b8: #94a3b8;
--legacy-color-hex-991b1b: #991b1b;
--legacy-color-hex-999: #999;
--legacy-color-hex-9a3f00: #9A3F00;
--legacy-color-hex-9a4b05: #9a4b05;
--legacy-color-hex-9aa0a6: #9aa0a6;
--legacy-color-hex-9aa3ad: #9aa3ad;
--legacy-color-hex-9ca3af: #9ca3af;
--legacy-color-hex-9e1027: #9E1027;
--legacy-color-hex-a4262c: #a4262c;
--legacy-color-hex-b45309: #b45309;
--legacy-color-hex-c2410c: #c2410c;
--legacy-color-hex-c7cedb: #c7cedb;
--legacy-color-hex-c7ebff: #c7ebff;
--legacy-color-hex-c8102e: #C8102E;
--legacy-color-hex-c9c9c9: #c9c9c9;
--legacy-color-hex-cc9800: #cc9800;
--legacy-color-hex-ccc: #ccc;
--legacy-color-hex-ced4da: #ced4da;
--legacy-color-hex-ceface: #CEFACE;
--legacy-color-hex-d1d1d1: #d1d1d1;
--legacy-color-hex-d1d5db: #d1d5db;
--legacy-color-hex-d6d5d5: #d6d5d5;
--legacy-color-hex-d6d6d6: #d6d6d6;
--legacy-color-hex-d6dce5: #d6dce5;
--legacy-color-hex-d7d3cb: #d7d3cb;
--legacy-color-hex-d9ecfb: #d9ecfb;
--legacy-color-hex-dbe4ef: #dbe4ef;
--legacy-color-hex-dc3545: #dc3545;
--legacy-color-hex-ddd: #ddd;
--legacy-color-hex-dedede: #DEDEDE;
--legacy-color-hex-e0ded8: #e0ded8;
--legacy-color-hex-e1ddd5: #e1ddd5;
--legacy-color-hex-e1e4e8: #e1e4e8;
--legacy-color-hex-e3e3e3: #e3e3e3;
--legacy-color-hex-e5e5e5: #e5e5e5;
--legacy-color-hex-e5e7eb: #e5e7eb;
--legacy-color-hex-e6e6e6: #e6e6e6;
--legacy-color-hex-e8f8ef: #e8f8ef;
--legacy-color-hex-e8ffe8: #E8FFE8;
--legacy-color-hex-e9ecef: #e9ecef;
--legacy-color-hex-ea580c: #ea580c;
--legacy-color-hex-ececec: #ececec;
--legacy-color-hex-eeeeee: #eeeeee;
--legacy-color-hex-eef0f3: #eef0f3;
--legacy-color-hex-eef2f7: #eef2f7;
--legacy-color-hex-eef6fc: #eef6fc;
--legacy-color-hex-f1f1f1: #f1f1f1;
--legacy-color-hex-f1f5f9: #f1f5f9;
--legacy-color-hex-f2f3f4: #f2f3f4;
--legacy-color-hex-f3f9fd: #f3f9fd;
--legacy-color-hex-f4cfd5: #F4CFD5;
--legacy-color-hex-f4f4f4: #f4f4f4;
--legacy-color-hex-f4f8ff: #f4f8ff;
--legacy-color-hex-f4fbfd: #f4fbfd;
--legacy-color-hex-f59e0b: #f59e0b;
--legacy-color-hex-f5f5f5: #f5f5f5;
--legacy-color-hex-f5f7fb: #f5f7fb;
--legacy-color-hex-f6f3ee: #f6f3ee;
--legacy-color-hex-f6f7fb: #f6f7fb;
--legacy-color-hex-f7f7f7: #f7f7f7;
--legacy-color-hex-f7f9fc: #f7f9fc;
--legacy-color-hex-f8ecef: #f8ecef;
--legacy-color-hex-f8f8f8: #f8f8f8;
--legacy-color-hex-f8f9fa: #f8f9fa;
--legacy-color-hex-f8fafc: #f8fafc;
--legacy-color-hex-fafafa: #fafafa;
--legacy-color-hex-fbfaf7: #fbfaf7;
--legacy-color-hex-fee2e2: #fee2e2;
--legacy-color-hex-fef0f1: #fef0f1;
--legacy-color-hex-ff0000: #FF0000;
--legacy-color-hex-ff9514: #ff9514;
--legacy-color-hex-ffb457: #ffb457;
--legacy-color-hex-ffb45a: #ffb45a;
--legacy-color-hex-ffe082: #FFE082;
--legacy-color-hex-fff: #FFF;
--legacy-color-hex-fff2df: #fff2df;
--legacy-color-hex-fff7ed: #fff7ed;
--legacy-color-hex-fff8e1: #FFF8E1;
--legacy-color-hex-ffffff: #FFFFFF;
--legacy-color-rgb-237-235-233: rgb(237, 235, 233);
--legacy-color-rgb-5-39-103: rgb(5, 39, 103);
--legacy-color-rgba-0-0-0-38: rgba(0, 0, 0, .38);
--legacy-color-rgba-0-0-0-0: rgba(0, 0, 0, 0);
--legacy-color-rgba-0-0-0-0-02: rgba(0, 0, 0, 0.02);
--legacy-color-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
--legacy-color-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
--legacy-color-rgba-0-0-0-0-11: rgba(0, 0, 0, 0.11);
--legacy-color-rgba-0-0-0-0-133: rgba(0, 0, 0, 0.133);
--legacy-color-rgba-0-0-0-0-2: rgba(0, 0, 0, 0.2);
--legacy-color-rgba-0-120-212-0-25: rgba(0, 120, 212, 0.25);
--legacy-color-rgba-0-74-173-0-6: rgba(0, 74, 173, 0.6);
--legacy-color-rgba-0-91-170-0-08: rgba(0, 91, 170, 0.08);
--legacy-color-rgba-0-74-173-0: rgba(0,74,173,0);
--legacy-color-rgba-0-74-173-0-35: rgba(0,74,173,0.35);
--legacy-color-rgba-100-100-111-0-2: rgba(100, 100, 111, 0.2);
--legacy-color-rgba-127-127-126: rgba(127, 127, 126);
--legacy-color-rgba-149-157-165-0-2: rgba(149, 157, 165, 0.2);
--legacy-color-rgba-15-23-42-08: rgba(15, 23, 42, .08);
--legacy-color-rgba-15-23-42-09: rgba(15, 23, 42, .09);
--legacy-color-rgba-15-23-42-12: rgba(15, 23, 42, .12);
--legacy-color-rgba-15-23-42-16: rgba(15, 23, 42, .16);
--legacy-color-rgba-15-23-42-24: rgba(15, 23, 42, .24);
--legacy-color-rgba-15-23-42-28: rgba(15, 23, 42, .28);
--legacy-color-rgba-15-23-42-35: rgba(15, 23, 42, .35);
--legacy-color-rgba-15-23-42-38: rgba(15, 23, 42, .38);
--legacy-color-rgba-15-23-42-48: rgba(15, 23, 42, .48);
--legacy-color-rgba-15-23-42-54: rgba(15, 23, 42, .54);
--legacy-color-rgba-15-23-42-58: rgba(15, 23, 42, .58);
--legacy-color-rgba-15-23-42-68: rgba(15, 23, 42, .68);
--legacy-color-rgba-15-23-42-72: rgba(15, 23, 42, .72);
--legacy-color-rgba-15-23-42-0-08: rgba(15, 23, 42, 0.08);
--legacy-color-rgba-200-16-46-0-25: rgba(200, 16, 46, 0.25);
--legacy-color-rgba-200-16-46-1: rgba(200, 16, 46, 1);
--legacy-color-rgba-220-53-69-0-25: rgba(220, 53, 69, 0.25);
--legacy-color-rgba-226-232-240-92: rgba(226, 232, 240, .92);
--legacy-color-rgba-241-241-241-1: rgba(241,241,241,1);
--legacy-color-rgba-255-255-255-06: rgba(255, 255, 255, .06);
--legacy-color-rgba-255-255-255-08: rgba(255, 255, 255, .08);
--legacy-color-rgba-255-255-255-12: rgba(255, 255, 255, .12);
--legacy-color-rgba-255-255-255-14: rgba(255, 255, 255, .14);
--legacy-color-rgba-255-255-255-18: rgba(255, 255, 255, .18);
--legacy-color-rgba-255-255-255-24: rgba(255, 255, 255, .24);
--legacy-color-rgba-255-255-255-26: rgba(255, 255, 255, .26);
--legacy-color-rgba-255-255-255-55: rgba(255, 255, 255, .55);
--legacy-color-rgba-255-255-255-0: rgba(255, 255, 255, 0);
--legacy-color-rgba-255-255-255-0-18: rgba(255, 255, 255, 0.18);
--legacy-color-rgba-255-255-255-0-48: rgba(255, 255, 255, 0.48);
--legacy-color-rgba-255-255-255-0-60: rgba(255, 255, 255, 0.60);
--legacy-color-rgba-255-255-255-0-8: rgba(255, 255, 255, 0.8);
--legacy-color-rgba-31-58-111-0-5: rgba(31, 58, 111, 0.5);
--legacy-color-rgba-37-47-58-0-06: rgba(37, 47, 58, 0.06);
--legacy-color-rgba-37-47-58-0-08: rgba(37, 47, 58, 0.08);
--legacy-color-rgba-37-99-235-0-32: rgba(37, 99, 235, 0.32);
--legacy-color-rgba-50-50-93-0-15: rgba(50, 50, 93, 0.15);
--chart-blue-1: #004AAD;
--chart-blue-2: #0078D4;
--chart-blue-3: #009EDC;
--chart-blue-4: #66CCFF;
--chart-blue-5: #A9C9FF;
--chart-attendance-remaining: #E5E7EB;
--chart-survey-submitted: #2E7D32;
--chart-survey-pending: #D1D5DB;
--chart-green-1: #1B5E20;
--chart-green-2: #2E7D32;
--chart-green-3: #4CAF50;
--chart-green-4: #81C784;
--chart-green-5: #C8E6C9;
--chart-purple-1: #4A148C;
--chart-purple-2: #6A1B9A;
--chart-purple-3: #8E24AA;
--chart-purple-4: #BA68C8;
--chart-purple-5: #E1BEE7;
--chart-orange-1: #F2B705;
--chart-orange-2: #FFB74D;
--chart-orange-3: #FF9800;
--chart-orange-4: #F57C00;
--chart-orange-5: #E65100;
--avatar-color-1: #6264A7;
--avatar-color-2: #8E8CD8;
--avatar-color-3: #464775;
--avatar-color-4: #4F6BED;
--avatar-color-5: #0078D4;
--avatar-color-6: #2B88D8;
/*Font Sizes*/
--fs-4xl: 30px;
--fs-3xl: 24px;
--fs-2xl: 20px;
--fs-xl: 18px;
--fs-large: 16px;
--fs-medium: 14px;
--fs-small: 13px;
--fs-xs: 12px;
--fs-2xs: 11px;
--fs-3xs: 10px;
/*Font Weight*/
--fw-extrabold: 800;
--fw-bold: 700;
--fw-semibold: 600;
--fw-medium: 500;
--fw-regular: 400;
}
html[data-theme="dark"] {
color-scheme: dark;
--color-bg-page: #111318;
--color-bg-surface: #1B1F27;
--color-bg-subtle: #252A34;
--color-bg-muted: #171A21;
--color-text-primary: #EEF2F7;
--color-text-secondary: #B8C0CC;
--color-text-muted: #8F98A6;
--color-text-on-accent: #FFFFFF;
--color-border-default: #343B49;
--color-border-subtle: #2A303B;
--color-overlay-login: rgba(17, 19, 24, 0.72);
--color-static-white: #FFFFFF;
--color-static-black: #000000;
--color-border-control: #4B5565;
--color-border-input: #4B5565;
--color-focus-ring: #79A7FF;
--color-brand-konfx-orange: #F69B38;
--color-brand-microsoft: #4EA6E8;
--nav-bg: #212121;
--nav-control-border: rgba(255, 255, 255, 0.22);
--nav-control-hover-bg: rgba(255, 255, 255, 0.12);
--nav-control-hover-border: rgba(255, 255, 255, 0.38);
--dashboard-bg: #11151D;
--dashboard-tile-bg: transparent;
--dashboard-tile-border: transparent;
--dashboard-tile-hover-bg: var(--color-bg-surface);
--dashboard-tile-hover-border: var(--color-border-default);
--dashboard-tile-shadow: rgba(0, 0, 0, 0) 0px 6px 12px -2px, rgba(0, 0, 0, 0) 0px 3px 7px -3px;
--dashboard-tile-hover-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
--shadow-dropdown: rgba(0, 0, 0, 0.32) 0px 8px 24px 0px, rgba(0, 0, 0, 0.24) 0px 2px 8px 0px;
--shadow-offcanvas: rgba(0, 0, 0, 0.32) -8px 0px 24px, rgba(0, 0, 0, 0.32) 8px 0px 24px;
--shadow-card-lg: 0px 12px 42px 0px rgba(0, 0, 0, 0.28);
--shadow-card: rgba(0, 0, 0, 0.28) 0px 4px 12px;
--shadow-card-strong: rgba(0, 0, 0, 0.38) 0px 4px 12px;
--shadow-panel: 0 0 10px rgba(0, 0, 0, 0.28);
--auth-provider-google-bg: #FFFFFF;
--auth-provider-google-hover-bg: #F5F5F5;
--auth-provider-google-text: #202020;
--loading-spinner-track: rgba(255, 73, 99, 0.25);
--loading-spinner-active: rgba(255, 73, 99, 1);
--alert-danger-bg: var(--danger-bg-subtle);
--alert-success-bg: var(--success-bg-subtle);
--alert-info-bg: var(--info-bg-subtle);
--footer-bg: var(--dark-color);
--file-display-bg: var(--color-bg-subtle);
--azure-validation-color: var(--danger-text-emphasis);
--review-strong-color: var(--color-text-primary);
--breadcrumb-hover-bg: var(--color-bg-subtle);
--breadcrumb-separator-color: var(--color-text-muted);
--event-logo-bg: var(--color-bg-subtle);
--event-logo-border: var(--color-border-control);
--event-logo-placeholder-color: var(--color-text-muted);
--toolbar-disabled-color: var(--color-text-muted);
--toolbar-disabled-icon-color: var(--color-text-muted);
--toast-close-filter: invert(93%) sepia(8%) saturate(377%) hue-rotate(182deg) brightness(104%) contrast(94%);
--table-sort-icon-filter: invert(93%) sepia(8%) saturate(377%) hue-rotate(182deg) brightness(104%) contrast(94%);
--body-color: var(--color-text-primary);
--body-bg: var(--color-bg-page);
--secondary-color: var(--color-text-primary);
--secondary-bg: #343B49;
--tertiary-color: var(--color-text-secondary);
--tertiary-bg: var(--color-bg-subtle);
--emphasis-color: #FFFFFF;
--border-color: var(--color-border-default);
--primary-color: #FF4963;
--primary-bg-subtle: #3D1821;
--primary-bg-soft: #271116;
--primary-bg-muted: #32151C;
--primary-border-subtle: #81313F;
--primary-text-emphasis: #FF7587;
--primary-text-color: var(--primary-text-emphasis);
--primary-color-hover: #FF6076;
--primary-color-active: #FF7A8B;
--success-color: #8BE1B0;
--success-bg-subtle: #10291C;
--success-border-subtle: #2F6F48;
--success-text-emphasis: #8BE1B0;
--danger-color: #FF6B75;
--danger-bg-subtle: #331418;
--danger-border-subtle: #7F2B33;
--danger-text-emphasis: #FF8B93;
--warning-color: #FFC46B;
--warning-bg-subtle: #332511;
--warning-border-subtle: #6E4E19;
--warning-text-emphasis: #FFD58F;
--info-color: #79D5EE;
--info-bg-subtle: #10262D;
--info-border-subtle: #2F6673;
--info-text-emphasis: #8CE3F7;
--light-color: var(--color-bg-subtle);
--light-bg-subtle: var(--color-bg-surface);
--light-border-subtle: var(--color-border-subtle);
--light-text-emphasis: var(--color-text-secondary);
--dark-color: #0C0E12;
--dark-bg-subtle: #343B49;
--dark-border-subtle: var(--color-border-default);
--dark-text-emphasis: var(--color-text-primary);
--white-color: var(--color-bg-surface);
--secondary-text-color: var(--secondary-color);
--tertiary-text-color: var(--tertiary-color);
--tertiary-text-emphasis: var(--tertiary-color);
--dark-emphasis-text: var(--dark-text-emphasis);
--surface-control-bg: var(--color-bg-surface);
--surface-control-addon-bg: var(--secondary-bg);
--surface-neutral-hover: #303642;
--surface-disabled: #2C323C;
--surface-chart-overlay: rgba(27, 31, 39, 0.82);
--overlay-login-bg: var(--color-overlay-login);
--theme-light-preview-bg: #FFFFFF;
--theme-light-preview-border: #DEDEDE;
--theme-light-preview-text: #202020;
--theme-dark-preview-bg: #111318;
--theme-dark-preview-border: #4B5565;
--theme-dark-preview-text: #EEF2F7;
--table-row-hover-bg: var(--primary-bg-soft);
--table-row-selected-bg: var(--primary-bg-muted);
--table-row-selected-color: var(--color-text-primary);
--table-row-disabled-bg: transparent;
--table-row-disabled-hover-bg: var(--table-row-hover-bg);
--form-select-caret-icon: url("../icon/Misc/angle-small-down-white.svg");
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: var(--ff-primary) !important;
display: flex;
flex-direction: column;
color: var(--body-color);
background: var(--body-bg);
}
@media (prefers-reduced-motion: no-preference) {
html.konfx-theme-transition body,
html.konfx-theme-transition .bg-white,
html.konfx-theme-transition .bg-light,
html.konfx-theme-transition .dropdown-menu,
html.konfx-theme-transition .form-control,
html.konfx-theme-transition .form-select,
html.konfx-theme-transition .offcanvas,
html.konfx-theme-transition .card,
html.konfx-theme-transition .toast,
html.konfx-theme-transition .avatar-language__menu-item {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
}
header {
flex-shrink: 0;
}
/* currently hide the background as requested */
.loginbg {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding-bottom: 2rem;
padding-top: 2rem;
position: relative;
/*background-image: url('/img/background/KL-Glo.jpg') !important;*/
background-image: url('/img/background/loginwallpaper.png') !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
}
.loginbg::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--overlay-login-bg);
z-index: 0;
}
/* Make sure content stays above overlay */
.loginbg > * {
position: relative;
z-index: 1;
}
/* Page Layout */
.page-header {
padding: 0px 20px;
}
/*.page-content {
padding: 20px 0px 0px;
height: 100%;*/
/*overflow: hidden !important;*/
/*}*/
.page-content {
padding: 20px 0px 0px;
flex: 1 1 0;
min-height: 0;
/*overflow: hidden !important;*/
}
/* Pagination Footer */
.form-pagination {
position: sticky;
bottom: 0;
background: var(--body-bg);
padding: 12px 20px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: start;
align-items: center;
/*box-shadow: var(--legacy-color-rgba-0-0-0-0-02) 0px -2px 6px, var(--legacy-color-rgba-0-0-0-0-02) 0px -4px 12px;*/
}
b, strong {
font-weight: var(--fw-semibold) !important;
}
/*---Font Sizes---*/
/* Normal Text */
p.normal {
font-size: var(--fs-medium);
font-weight: var(--fw-regular);
}
p.normal-sm, span.normal-sm {
font-size: var(--fs-small);
font-weight: var(--fw-regular);
}
p.normal-xs {
font-size: var(--fs-3xs);
font-weight: var(--fw-regular);
}
/* Headings */
h1.heading1, h2.heading2, h3.heading3 {
font-weight: var(--fw-semibold);
}
h1.heading1 {
font-size: var(--fs-3xl);
}
h2.heading2 {
font-size: var(--fs-2xl);
}
h3.heading3 {
font-size: var(--fs-xl);
}
/* Titles */
p.title-sm,
p.title-md, span.title-md,
p.title-lg {
font-weight: var(--fw-semibold);
}
p.title-sm {
font-size: var(--fs-small);
}
p.title-md, span.title-md {
font-size: var(--fs-medium);
}
p.title-lg {
font-size: var(--fs-large);
}
/* Subtitle */
span.subtitle, p.subtitle {
font-size: var(--fs-small);
font-weight: var(--fw-small);
color: var(--tertiary-color)
}
p.subtitle-md {
font-size: var(--fs-medium);
font-weight: var(--fw-small);
color: var(--secondary-color)
}
/* Links */
a.link, li.link {
font-size: var(--fs-small);
font-weight: var(--fw-regular);
color: var(--primary-text-emphasis);
text-decoration: none;
cursor: pointer !important;
}
a.link:hover, li.link:hover {
text-decoration: underline;
}
a.link-sm, li.link-sm {
font-size: var(--fs-small);
font-weight: var(--fw-regular);
color: var(--primary-text-emphasis);
text-decoration: none;
cursor: pointer !important;
}
a.link-sm:hover, li.link-sm:hover {
text-decoration: underline;
}
.link.breadcrumb-link {
padding: 0.188rem 0px;
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
color: var(--tertiary-color) !important;
text-decoration: none;
cursor: pointer !important;
}
.link.breadcrumb-link:hover {
text-decoration: underline;
background: var(--breadcrumb-hover-bg);
}
a.pg-title {
font-size: var(--fs-large) !important;
font-weight: var(--fw-semibold) !important;
}
/*span.text-primary{
font-size: var(--fs-xs) !important;
}*/
/*---Background Colors---*/
.bg-primary {
background-color: var(--primary-color) !important;
}
.bg-secondary {
background-color: var(--tertiary-bg) !important;
}
.bg-white {
background-color: var(--color-bg-surface) !important;
color: var(--body-color);
}
.bg-light {
background-color: var(--tertiary-bg) !important;
}
/*---Icons---*/
i.icon {
font-size: var(--fs-large);
width: auto;
height: fit-content;
display: flex;
align-items: center;
}
i.icon-md {
font-size: var(--fs-small);
width: auto;
height: fit-content;
display: flex;
align-items: center;
}
i.icon-xs {
font-size: var(--fs-xs);
width: auto;
height: fit-content;
display: flex;
align-items: center;
}
img.icon{
width: 16px;
/*height: 16px;*/
}
/*---Buttons---*/
/*Main Button*/
.btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: var(--fw-regular) !important;
font-size: var(--fs-small) !important;
padding: 0 !important;
/*border-radius: 0.5rem !important;*/
border-radius: 0.25rem !important;
border: none !important;
box-shadow: none !important;
height: fit-content;
}
.btn.active {
color: var(--primary-text-emphasis) !important;
background-color: var(--primary-bg-subtle) !important;
border: none !important;
/*padding: 0.5rem 0rem !important;*/
}
/*.btn:hover {
box-shadow: none !important;
border: none !important;
}*/
.btn:focus {
box-shadow: none;
}
/*Button Variants*/
.btn-primary {
color: var(--legacy-color-hex-fff) !important;
background-color: var(--primary-color) !important;
/*border-color: none !important;*/
border: 1px solid var(--primary-color) !important;
font-weight: var(--fw-semibold) !important;
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
}
.btn-primary:hover {
border: 1px solid var(--primary-color) !important;
/* background-color: var(--primary-color-hover) !important;*/
}
.btn-outline-primary {
color: var(--primary-color) !important;
background-color: transparent !important;
border: 1px solid var(--primary-color) !important;
font-weight: var(--fw-semibold) !important;
padding: 0.5rem !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
color: var(--primary-color) !important;
background-color: var(--primary-bg-subtle) !important;
border: 1px solid var(--primary-color) !important;
box-shadow: none !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
color: var(--primary-color) !important;
background-color: transparent !important;
border-color: var(--primary-color) !important;
opacity: 0.65;
}
.btn-link {
padding: 0.5rem !important;
font-weight: var(--fw-medium) !important;
padding: 0rem !important;
display: flex;
}
.btn-subtle {
padding: 0.5rem !important;
font-weight: 500 !important;
display: flex;
align-items: center;
border-radius: 0px !important;
color: var(--body-color) !important;
}
.btn-subtle:hover {
background-color: var(--color-bg-subtle) !important;
border-radius: 0px !important;
}
.btn-subtle:disabled,
.btn-subtle.disabled {
color: var(--toolbar-disabled-color) !important;
opacity: 1;
}
.btn-subtle:disabled i,
.btn-subtle.disabled i {
color: var(--toolbar-disabled-icon-color) !important;
}
.btn-subtle:disabled:hover,
.btn-subtle.disabled:hover {
background-color: transparent !important;
color: var(--toolbar-disabled-color) !important;
}
.btn-subtle-sm {
padding: 0.125rem 0.25rem !important;
font-weight: 500 !important;
display: flex;
align-items: center;
border-radius: 0px !important;
}
.btn-subtle-sm:hover {
background-color: var(--color-bg-subtle) !important;
border-radius: 0px !important;
}
.btn-subtle-link {
padding: 0.25rem 0rem !important;
font-weight: 500 !important;
display: flex;
align-items: center;
border-radius: 0px !important;
color: var(--primary-color) !important;
}
.btn-subtle-link:hover {
background-color: var(--color-bg-subtle) !important;
border-radius: 0px !important;
}
.btn-subtle.border {
padding: 0.5rem !important;
font-weight: 500 !important;
display: flex;
align-items: center;
border-radius: 0px !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
}
.btn-secondary {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: transparent !important;
font-weight: var(--fw-semibold) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
color: var(--secondary-color) !important;
}
.btn-secondary:hover {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--secondary-bg) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
color: var(--secondary-color) !important;
}
.btn-secondary-lg {
padding: 0.5rem !important;
background-color: transparent !important;
font-size: var(--fs-medium) !important;
font-weight: var(--fw-semibold) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
color: var(--secondary-color) !important;
}
.btn-secondary-lg:hover {
background-color: var(--secondary-bg) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
color: var(--secondary-color) !important;
}
.btn-success {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--success-color) !important;
border-color: none !important;
color: var(--legacy-color-hex-fff) !important;
}
.btn-danger {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--danger-color) !important;
border-color: none !important;
color: var(--legacy-color-hex-fff) !important;
}
.btn-warning {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--warning-color) !important;
border-color: none !important;
color: var(--legacy-color-hex-fff) !important;
}
.btn-info {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--info-color) !important;
border-color: none !important;
color: var(--legacy-color-hex-fff) !important;
}
.btn-light {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
color: var(--secondary-color) !important;
background-color: var(--light-bg-subtle) !important;
border-color: none !important;
width: fit-content !important;
padding: 0.375rem 0.5rem !important;
}
.btn-disable {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--tertiary-bg) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
color: var(--tertiary-color) !important;
}
.btn-disable:hover {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--tertiary-bg) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
color: var(--tertiary-color) !important;
}
.btn.btn-close-sm {
border-radius: 0 !important;
padding: 8px !important;
color: var(--body-color) !important;
}
.btn.btn-close-sm .icon {
color: inherit;
}
.btn.btn-close-sm:hover {
background-color: var(--danger-color) !important;
color: var(--color-static-white) !important;
border-radius: 0 !important;
padding: 8px !important;
}
/*---Nav---*/
/*NavBar & Profile*/
.navbar {
padding: 4px 20px;
background-color: var(--legacy-color-hex-212121) !important;
/*background-color: var(--primary-color) !important;*/
}
.manage-top-navbar {
height: 45px;
min-height: 45px;
max-height: 45px;
overflow: hidden;
box-sizing: border-box;
}
.manage-top-navbar__start {
min-width: 0;
}
.manage-top-navbar__brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 100%;
min-width: 0;
overflow: hidden;
}
.manage-top-navbar__logo {
display: block;
width: auto;
max-width: 120px;
max-height: 30px;
object-fit: contain;
flex: 0 0 auto;
}
.manage-top-navbar__title {
white-space: nowrap;
font-weight: var(--fw-semibold);
line-height: 1;
}
.avatar {
width: 30px;
height: 30px;
margin: 0 0.625rem;
}
.avatar-lg {
width: 100px;
height: 100px;
}
img.search-icon {
width: 16px;
filter: brightness(0) saturate(100%) invert(31%) sepia(82%) saturate(1901%) hue-rotate(187deg) brightness(89%) contrast(101%);
}
/*Sidebar*/
#sidebar {
height: 100%;
min-height: 0;
background-color: var(--color-bg-surface) !important;
color: var(--body-color);
}
.sidebar {
flex-grow: 0;
flex-shrink: 0;
padding: 0px;
background-color: var(--color-bg-surface) !important;
color: var(--body-color);
}
#mainMenu .side-menu-body,
#mainMenu #sidebar,
#mainMenu .sidebar {
background-color: var(--color-bg-surface) !important;
color: var(--body-color);
}
#sidebar:not(.fullView) {
transition: width 0.35s ease, padding 0.35s ease;
}
#sidebar.fullView {
padding: 0 !important;
}
.menuName {
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
/*#sidebar:not(.fullView) .menuName {
display: none;
transition: display 0.35s ease;
}*/
#sidebar.fullView .menuName {
opacity: 1;
transform: translateX(0);
}
#sidebar button {
height: 34px;
}
#sidebar #collapseBtn button:hover {
background-color: var(--tertiary-bg) !important;
}
/* Products Side Menu */
#sideMenu {
height: 100%;
min-height: 0;
}
#sideMenu:not(.fullView) {
transition: width 0.35s ease, padding 0.35s ease;
}
#sideMenu.fullView {
padding: 0 !important;
}
.menu-name {
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
#sideMenu.full-view .menu-name {
opacity: 1;
transform: translateX(0);
}
#sideMenu button {
height: 34px;
}
#sideMenu #collapseBtn button:hover {
background-color: var(--tertiary-bg) !important;
}
.side-menu {
flex-grow: 0;
flex-shrink: 0;
padding: 0px;
}
/* End of Products Side Menu */
.nav .weave {
display: flex;
color: var(--secondary-color);
font-size: var(--fs-small) !important;
font-weight: var(--fw-semibold) !important;
text-decoration: none;
padding: 0.5rem 1rem !important;
background-color: transparent;
text-align: left;
border: 0;
border-radius: 0rem !important;
box-shadow: none !important;
height: fit-content;
border-left: 3px solid var(--body-bg) !important;
cursor: pointer;
}
.nav .weave:hover {
background-color: var(--tertiary-bg) !important;
border-left: 3px solid var(--tertiary-bg) !important;
}
.nav .weave:focus-visible {
outline: none;
background-color: var(--tertiary-bg) !important;
border-left: 3px solid var(--primary-color) !important;
color: var(--primary-color) !important;
}
.nav .weave.active {
background-color: var(--tertiary-bg) !important;
border-left: 3px solid var(--primary-color) !important;
color: var(--primary-color) !important;
font-weight: var(--fw-semibold) !important;
padding: 0.5rem 1rem !important;
}
.nav a {
display: flex;
color: var(--secondary-color);
font-weight: var(--fw-semibold) !important;
text-decoration: none;
padding: 0.5rem 1rem !important;
border-radius: 0rem !important;
box-shadow: none !important;
height: fit-content;
border-left: 3px solid var(--body-bg) !important;
}
.nav a:hover {
background-color: var(--tertiary-bg) !important;
border-left: 3px solid var(--tertiary-bg) !important;
}
.nav a.active {
background-color: var(--tertiary-bg) !important;
border-left: 3px solid var(--primary-color) !important;
color: var(--primary-color) !important;
font-weight: var(--fw-semibold) !important;
padding: 0.5rem 1rem !important;
}
/*---Inputs---*/
/*Default*/
input.form-control.input {
border-radius: 0.5rem !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
font-size: var(--fs-small) !important;
color: var(--tertiary-text-emphasis) !important;
}
/*Large Input*/
.navbar .bg-input-lg {
background-color: var(--info-bg-subtle);
border: none;
border-radius: 8px;
width: 364px;
}
input.form-control.input-lg {
border-radius: 0.5rem;
background-color: transparent;
padding: 8px;
font-size: var(--fs-small);
}
input.form-control.input-lg:focus {
background-color: var(--light-bg-subtle);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--dark-emphasis-text);
box-shadow: none;
border-radius: 0.5rem;
}
input.form-control.input-lg::placeholder {
font-size: var(--fs-semibold);
font-weight: var(--fw-regular);
color: var(--primary-color);
}
/* Floating input styling only (preserves existing input styles) */
input.form-control.input-floating {
width: 100%;
border: 1px solid var(--border-color); /* neutral-200 */
border-radius: 3px;
padding: .25rem .5rem !important;
font-size: var(--fs-small) !important;
line-height: 1.5;
transition: 0.2s ease;
color: var(--body-color); /* fallback for tertiary text */
background-color: var(--surface-control-bg);
}
/* Focus state */
input.form-control.input-floating:focus {
outline: none;
border-color: var(--color-focus-ring); /* primary */
}
/* Label inside floating */
.form-floating label {
--floating-label-x: .5rem;
--floating-label-chip-padding: .125rem;
position: absolute;
top: 50%;
left: var(--floating-label-x);
display: inline-flex;
align-items: center;
font-size: var(--fs-xs) !important;
line-height: 1;
color: var(--color-text-muted); /* neutral-300 */
pointer-events: none;
transition: 0.2s ease;
transform: translateY(-50%);
background-color: var(--surface-control-bg);
padding: 0;
height: auto !important;
}
/* Label when focused or has value */
input.form-control.input-floating:focus ~ label,
input.form-control.input-floating:not(:placeholder-shown) ~ label {
top: 0px; /* 16px * -0.7 offset */
left: calc(var(--floating-label-x) - var(--floating-label-chip-padding));
transform: translateY(-50%);
font-size: var(--fs-3xs) !important;
color: var(--body-color);
background-color: var(--surface-control-bg) !important;
padding: 0 var(--floating-label-chip-padding);
}
/* Ensure padding doesn't shrink after label floats */
.form-floating > .form-control.input-floating:focus,
.form-floating > .form-control.input-floating:not(:placeholder-shown) {
padding: .25rem .5rem !important;
}
.form-floating > .form-control.input-floating {
height: calc(1.5em + .5rem + 2px);
min-height: calc(1.5em + .5rem + 2px);
line-height: 1.5;
}
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label{
opacity: 100% !important;
}
/*---Dropdown---*/
.dropdown-menu {
--bs-dropdown-bg: var(--color-bg-surface);
--bs-dropdown-border-color: var(--border-color);
--bs-dropdown-color: var(--body-color);
--bs-dropdown-link-color: var(--body-color);
--bs-dropdown-link-hover-bg: var(--surface-neutral-hover);
--bs-dropdown-link-hover-color: var(--body-color);
--bs-dropdown-link-active-bg: var(--primary-color);
--bs-dropdown-link-active-color: var(--color-text-on-accent);
position: absolute;
z-index: 1000;
display: none;
min-width: 12.5rem;
padding: 0rem;
margin: 0;
font-size: var(--fs-medium);
font-weight: var(--fw-semibold) !important;
color: var(--secondary-color);
text-align: left;
list-style: none;
background-color: var(--color-bg-surface);
background-clip: padding-box;
border: 1px solid var(--border-color) !important;
border-radius: 0rem !important;
box-shadow: var(--shadow-dropdown);
}
.filter-dropdown-menu {
width: 200px !important;
}
.dropdown-item {
padding: .25rem 0.5rem !important;
color: var(--body-color);
}
.dropdown-menu .dropdown-item:hover {
background-color: var(--surface-neutral-hover);
color: var(--body-color) !important;
border-radius: 0rem;
cursor: pointer;
}
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
background-color: var(--danger-bg-subtle);
color: var(--danger-text-emphasis) !important;
}
.dropdown-menu .dropdown-item {
transition: background-color 0.3s ease, color 0.3s ease;
}
.dropdown-menu .dropdown-item.active {
background-color: var(--primary-color);
color: var(--color-text-on-accent) !important;
font-weight: 500;
}
.dropdown-menu .dropdown-item:active{
color: inherit;
}
.account-dropdown-menu {
min-width: 200px;
}
.navbar .account-dropdown-menu.dropdown-menu-end[data-bs-popper] {
margin-top: 5px;
right: -20px;
}
.avatar-dropdown-menu {
overflow: visible;
}
.avatar-language {
position: relative;
}
.avatar-dropdown-menu .avatar-language__trigger:hover,
.avatar-dropdown-menu .avatar-language__trigger:focus,
.avatar-dropdown-menu .avatar-language__trigger[aria-expanded="true"] {
background-color: var(--surface-neutral-hover) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--body-color) !important;
}
.avatar-dropdown-menu .avatar-language__trigger:hover i,
.avatar-dropdown-menu .avatar-language__trigger:focus i,
.avatar-dropdown-menu .avatar-language__trigger[aria-expanded="true"] i {
color: inherit !important;
}
.avatar-theme__current {
align-items: center;
border: 1px solid var(--border-color);
border-radius: 999px;
display: inline-flex;
font-size: var(--fs-3xs);
font-weight: var(--fw-semibold);
gap: .25rem;
justify-content: center;
margin-left: auto;
min-width: 70px;
padding: .125rem .5rem;
}
.avatar-theme__current-icon {
align-items: center;
display: inline-flex;
font-size: var(--fs-3xs);
line-height: 1;
}
.avatar-theme__current--system {
background: var(--primary-bg-subtle);
border-color: var(--primary-border-subtle);
color: var(--primary-text-emphasis);
}
.avatar-theme__current--light {
background: var(--theme-light-preview-bg);
border-color: var(--theme-light-preview-border);
color: var(--theme-light-preview-text);
}
.avatar-theme__current--dark {
background: var(--theme-dark-preview-bg);
border-color: var(--theme-dark-preview-border);
color: var(--theme-dark-preview-text);
}
.avatar-language__flyout {
display: block;
left: auto;
margin-right: .25rem;
min-width: 200px;
opacity: 0;
pointer-events: none;
right: 100%;
top: 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
visibility: hidden;
}
.avatar-language__flyout.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.avatar-language__menu-item {
align-items: center;
color: var(--body-color) !important;
display: flex !important;
gap: .75rem;
justify-content: space-between;
}
.avatar-language__menu-item:hover,
.avatar-language__menu-item:focus {
background: var(--surface-neutral-hover) !important;
color: var(--body-color) !important;
}
.avatar-language__menu-item.is-active {
background: var(--primary-bg-subtle) !important;
color: var(--primary-text-emphasis) !important;
}
.avatar-language__menu-item.is-active:hover,
.avatar-language__menu-item.is-active:focus {
background: var(--primary-bg-muted) !important;
color: var(--primary-text-emphasis) !important;
}
.avatar-theme__menu-label {
align-items: center;
display: inline-flex;
gap: .5rem;
}
#section .menu-lg {
width: 320px;
width: 320px;
}
/*---Offcanvas---*/
.offcanvas {
--bs-offcanvas-bg: var(--body-bg);
--bs-offcanvas-color: var(--body-color);
background-color: var(--body-bg) !important;
background-clip: padding-box;
box-shadow: var(--shadow-offcanvas);
color: var(--body-color);
border: none !important;
z-index: 1045;
}
.offcanvas .offcanvas-header,
.offcanvas .offcanvas-body,
.offcanvas .offcanvas-footer {
background-color: var(--body-bg);
}
.offcanvas .offcanvas-body {
min-height: 0;
}
.offcanvas.sidemenu {
width: 240px !important;
}
@media screen and (max-width: 767.98px) {
.offcanvas.sidemenu {
max-width: 100vw;
width: 100vw !important;
}
}
@media screen and (max-width: 1024px) {
#sideMenu,
#cmsSideMenu,
.section-side-nav-column {
display: none !important;
}
.page-content .content {
min-width: 0;
width: 100%;
}
}
.offcanvas.offcanvas-sm {
min-width: 20%;
}
.offcanvas.offcanvas-md {
min-width: 30%;
}
.offcanvas.offcanvas-lg {
min-width: 50%;
}
.offcanvas-backdrop {
opacity: 0.3 !important;
z-index: 1040;
}
/* When offcanvas is open, tint everything except the offcanvas */
body.lock-outside:has(.offcanvas.show) > *:not(.offcanvas):not(.offcanvas-backdrop):not(.toast-container) {
cursor: not-allowed !important;
pointer-events: none;
user-select: none;
}
body.lock-outside:has(.offcanvas.show) > .toast-container {
pointer-events: auto !important;
cursor: auto !important;
user-select: auto !important;
}
/* Re-enable interaction for the offcanvas itself */
body.lock-outside:has(.offcanvas.show) .offcanvas.show {
pointer-events: auto !important;
cursor: auto !important;
user-select: auto !important;
}
/* Ensure ALL children inside offcanvas are interactive */
body.lock-outside:has(.offcanvas.show) .offcanvas.show * {
pointer-events: auto !important;
cursor: pointer !important;
}
.btn-close {
background-image: url('../icon/Misc/cross-small.svg') !important;
background-repeat: no-repeat;
background-size: 1.5em !important;
}
#offcanvasDriverDetails, #offcanvasVehicleDetails, #viewDetailsCanv, #offcanvasApplication {
width: auto;
}
.offcanvas-header {
padding: 1rem 1rem 0rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/*---Accordions---*/
.accordion-button {
box-shadow: none !important;
}
.accordion-button::after {
width: 1rem !important;
height: 1rem !important;
background-image: url("../icon/Misc/angle-small-down.svg") !important;
background-repeat: no-repeat;
background-size: 1rem !important;
order: -1;
margin-left: 0;
margin-right: 0.5em !important;
}
.was-validated .form-select:valid:not([multiple]):not([size]) {
background-image: url("../icon/Misc/check-valid.svg") !important;
background-size: 1rem;
}
.accordion-item {
background-color: transparent !important;
border-color: var(--border-color);
border-left: none;
border-right: none;
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: .5rem !important;
font-size: var(--fs-medium) !important;
font-weight: var(--fw-semibold) !important;
color: var(--secondary-text-color) !important;
background-color: transparent !important;
border-bottom: 0;
}
.accordion-button.accordion-sm {
position: relative;
display: flex;
align-items: center;
width: fit-content !important;
padding: .5rem !important;
font-size: var(--fs-small) !important;
font-weight: var(--fw-medium) !important;
color: var(--dark-emphasis-text) !important;
border-bottom: 0;
}
.accordion-button:not(.collapsed) {
background-color: transparent !important;
color: var(--secondary-text-color) !important;
border-bottom: 0;
}
.accordion-body {
background-color: transparent !important;
color: var(--body-color);
}
/*---Responsiveness---*/
/* Extra Small mobile screens */
@media screen and (max-width: 320px) {
.bg-input-lg, .username, .action-menu-lg, .ctrl-panel, .collapse-btn {
display: none !important;
}
.pg-title {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
i.icon {
font-size: var(--fs-small);
}
#offcanvasDriverDetails, #offcanvasVehicleDetails {
width: 100%; /* Adjust to your preferred width */
}
html, body {
overflow: auto;
}
}
/* Small mobile screens */
@media screen and (min-width: 375px) and (max-width: 480px) {
.bg-input-lg, .username, .action-menu-lg, .ctrl-panel, .collapse-btn {
display: none !important;
}
.pg-title {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
i.icon {
font-size: var(--fs-small);
}
#offcanvasDriverDetails, #offcanvasVehicleDetails {
width: 100%; /* Adjust to your preferred width */
}
html, body {
overflow: auto;
}
}
/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.username, .action-menu-lg, .collapse-btn {
display: none !important;
}
.navbar .bg-input-lg {
width: 300px;
}
html, body {
overflow: auto;
}
}
/* Small laptops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
/* Large Input */
.navbar .bg-input-lg {
width: 400px;
}
.username, .action-menu-sm {
display: none !important;
}
html, body {
/*overflow-x: hidden;*/
overflow: hidden;
}
}
/* Large screens */
@media screen and (min-width: 1280px) {
.navbar .bg-input-lg {
width: 500px;
}
.action-menu-sm {
display: none !important;
}
.eCharts {
width: 100% !important;
height: 320px !important;
position: relative !important;
}
html, body {
/*overflow-x: hidden;*/
overflow: hidden;
}
}
/*---Alert Message---*/
.alert {
display: flex;
align-items: center;
font-size: var(--fs-small);
font-weight: var(--fw-small);
border-radius: .375rem;
padding: .5rem;
/*line-height: 19.5px !important;*/
}
.alert i {
font-size: var(--fs-medium);
line-height: 19.5px !important;
}
.alert-danger {
color: var(--color-text-primary);
background-color: var(--alert-danger-bg);
border-color: var(--alert-danger-bg);
}
.alert-success {
color: var(--color-text-primary);
background-color: var(--alert-success-bg);
border-color: var(--alert-success-bg);
}
.alert-warning {
color: var(--color-text-primary);
background-color: var(--warning-bg-subtle);
border: 1px solid var(--warning-bg-subtle);
}
.alert-info {
color: var(--color-text-primary);
background-color: var(--alert-info-bg);
border-color: var(--alert-info-bg);
}
.alert-subtle-primary {
color: var(--primary-text-emphasis) !important;
background-color: var(--primary-bg-subtle) !important;
padding: .5rem .75rem;
border-radius: .75rem;
}
.alert-subtle-sucess {
color: var(--success-text-emphasis) !important;
background-color: var(--success-bg-subtle) !important;
padding: .5rem .75rem;
border-radius: .75rem;
}
.alert-subtle-warning {
color: var(--warning-text-emphasis) !important;
background-color: var(--warning-bg-subtle) !important;
padding: .5rem .75rem;
border-radius: .75rem;
}
.alert-subtle-danger {
color: var(--danger-text-emphasis) !important;
background-color: var(--danger-bg-subtle) !important;
padding: .5rem .75rem;
border-radius: .75rem;
}
.alert-subtle-info {
color: var(--info-text-emphasis) !important;
background-color: var(--info-bg-subtle) !important;
padding: .5rem .75rem;
border-radius: .75rem;
}
/*Text*/
i.text-primary, .text-primary {
color: var(--primary-text-emphasis) !important;
}
i.text-success, .text-success {
color: var(--success-text-emphasis) !important
}
i.text-warning, .text-warning {
color: var(--warning-text-emphasis) !important;
}
i.text-danger, .text-danger {
color: var(--danger-text-emphasis) !important;
}
i.text-info, .text-info {
color: var(--info-text-emphasis) !important;
}
/*---Badges---*/
.badge {
display: inline-block;
padding: .25rem .375rem;
font-size: var(--fs-small);
line-height: 19.5px !important;
}
.badge-primary {
color: var(--dark-color) !important;
background-color: var(--primary-bg-subtle) !important;
padding: 0.375rem .75rem !important;
border-radius: .375rem;
font-weight: var(--fw-small);
}
.badge-primary-sm {
color: var(--primary-color) !important;
background-color: var(--primary-bg-subtle) !important;
padding: .125rem .375rem;
border-radius: .25rem;
font-weight: var(--fw-semibold);
}
.badge-secondary {
color: var(--secondary-color) !important;
background-color: var(--secondary-bg) !important;
padding: .5rem;
border-radius: .375rem;
font-weight: var(--fw-medium);
}
.badge-success {
color: var(--success-text-emphasis) !important;
background-color: var(--success-bg-subtle) !important;
padding: .5rem;
border-radius: .375rem;
font-weight: var(--fw-medium);
}
.badge-success-sm {
color: var(--success-text-emphasis) !important;
background-color: var(--success-bg-subtle) !important;
padding: .125rem .375rem;
border-radius: 0rem;
font-weight: var(--fw-semibold);
}
.badge-warning {
color: var(--dark-color) !important;
background-color: var(--warning-bg-subtle) !important;
/*padding: .25rem .375rem;*/
padding: .5rem;
border-radius: .375rem;
font-weight: var(--fw-small);
}
.badge-danger {
color: var(--dark-color) !important;
background-color: var(--danger-bg-subtle) !important;
padding: .5rem;
border-radius: .375rem;
font-weight: var(--fw-small);
}
.badge-info {
color: var(--info-text-emphasis) !important;
background-color: var(--info-bg-subtle) !important;
padding: .5rem;
border-radius: .375rem;
font-weight: var(--fw-medium);
}
/*---Tabs---*/
.nav {
align-items: center !important;
column-gap: 8px !important;
}
.nav-tabs {
border-bottom: none !important;
/*padding: .5rem .5rem 0rem !important;*/
background-color: transparent !important;
border-bottom: none !important;
}
.tab-button.active {
background-color: transparent !important;
border-bottom: 2px solid var(--primary-color) !important;
color: var(--primary-text-color) !important;
font-weight: var(--fw-semibold) !important;
}
.tab-button {
background-color: transparent !important;
color: var(--dark-text-emphasis) !important;
border: none !important;
border-radius: 0px !important;
transition: color 0.3s ease, background-color 0.3s ease, font-weight 0.3s ease, padding 0.3s ease;
padding: 0.5rem 0rem !important;
}
.tab-button:hover {
color: var(--body-color) !important;
background-color: var(--tertiary-bg) !important;
font-weight: var(--fw-semibold) !important;
padding: 0.5rem 0.75rem !important;
}
.tab-button:focus {
box-shadow: none !important;
}
.tab-button:disabled,
.tab-button.disabled {
background-color: transparent !important;
color: var(--color-text-muted) !important;
opacity: 1;
}
/*--- Forms ---*/
.col-form-label {
font-size: var(--fs-small) !important;
font-weight: var(--fw-medium) !important;
}
.form-check-label {
}
input.form-control {
/*padding: .375rem .75rem !important;*/
padding: .25rem .5rem !important;
font-size: var(--fs-small) !important;
border-radius: .25rem !important;
background-color: var(--surface-control-bg) !important;
border-color: var(--border-color) !important;
color: var(--body-color) !important;
/*min-height: 36px;*/
}
input.form-control.form-digit {
padding: .75rem !important;
}
input.form-control:focus {
border: 1px solid var(--primary-text-emphasis) !important;
box-shadow: none !important;
}
input.form-control:placeholder-shown {
font-weight: var(--fw-regular) !important;
}
input.form-control:not(:placeholder-shown) {
/*font-weight: var(--fw-semibold) !important;*/
font-weight: var(--fw-regular) !important;
color: var(--body-color) !important;
}
input.form-control::placeholder {
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-text-muted) !important;
opacity: 1;
}
.data-table-wrapper input.form-control::placeholder {
color: var(--color-text-muted) !important;
opacity: 1 !important;
}
.side-menu .search-input::placeholder,
.cms-azure-menu .search-input::placeholder {
color: var(--color-text-muted) !important;
opacity: 1;
}
/*select*/
select.form-select:not([multiple]):not([size]) {
--select-caret-button-width: 2rem;
--select-caret-button-bg: var(--surface-control-bg);
/*padding: .375rem 2.25rem .375rem .75rem !important;*/
padding: .25rem calc(var(--select-caret-button-width) + .5rem) .25rem .5rem !important;
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
color: var(--dark-text-emphasis) !important;
background-color: var(--surface-control-bg) !important;
background-image: var(--form-select-caret-icon) !important;
background-position: right .75rem center;
background-size: 1rem !important;
border-radius: .25rem !important;
border: 1px solid var(--border-color);
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
/*min-height: 36px;*/
}
select.form-select:not([multiple]):not([size]):hover:not(:disabled):not(.disabled) {
--select-caret-button-bg: var(--tertiary-bg);
}
.form-select-chevron {
position: relative;
min-width: 0;
}
.form-select-chevron::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border: 1px solid var(--primary-text-emphasis);
border-radius: .25rem;
opacity: 0;
pointer-events: none;
}
.form-select-chevron:focus-within::after,
.form-select-chevron.is-invalid::after {
opacity: 1;
}
.form-select-chevron.is-invalid::after {
border-color: var(--danger-color);
}
.form-select-chevron > select.form-select:not([multiple]):not([size]) {
width: 100%;
padding-right: calc(var(--select-caret-button-width, 2rem) + .5rem) !important;
background-image: none !important;
background-position: unset !important;
background-size: auto !important;
background-repeat: no-repeat !important;
appearance: none;
}
.form-select-chevron-icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: var(--select-caret-button-width, 2rem);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-radius: 0 .25rem .25rem 0;
background: var(--surface-control-bg);
font-size: 16px;
line-height: 1;
pointer-events: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.form-select-chevron:hover .form-select-chevron-icon {
background: var(--tertiary-bg);
}
.form-select-chevron:focus-within .form-select-chevron-icon {
border-color: var(--primary-text-emphasis);
}
.form-select-chevron.is-invalid .form-select-chevron-icon {
border-color: var(--danger-color);
}
.form-select-chevron > select.form-select:disabled + .form-select-chevron-icon,
.form-select-chevron > select.form-select.disabled + .form-select-chevron-icon {
background-color: var(--surface-disabled);
cursor: not-allowed;
}
select.form-select:disabled,
select.form-select.disabled {
background-color: var(--surface-disabled) !important;
color: var(--color-text-muted) !important;
cursor: not-allowed;
opacity: 1;
}
.select.form-select.selected{
font-weight: var(--fw-semibold) !important;
}
.form-select:focus {
/*outline: none;*/
border: 1px solid var(--primary-text-emphasis) !important;
box-shadow: none !important;
}
select.form-select option:checked {
font-weight: var(--fw-semibold) !important;
}
select.form-select option {
background-color: var(--surface-control-bg);
color: var(--body-color);
}
select.disabled {
background-color: var(--surface-disabled) !important;
font-weight: var(--fw-semibold) !important;
color: var(--dark-text-emphasis) !important;
cursor: not-allowed;
}
input.form-control-plaintext {
display: block !important;
width: 100% !important;
padding: .375rem .75rem !important;
font-size: var(--fs-medium) !important;
border-radius: .5rem !important;
}
input.form-control[type="file"] {
height: 36px;
padding: 0 !important;
font-size: var(--fs-small) !important;
}
input.form-control[type="file"]::file-selector-button {
min-height: 36px;
padding: 0 12px;
margin: 0 12px 0 0;
border: 0;
border-right: 1px solid var(--legacy-color-hex-ced4da);
}
label {
font-size: var(--fs-small) !important;
margin-bottom: 6px;
}
.form-check-input[type=radio]:focus, .form-check-input[type=checkbox]:focus {
box-shadow: none !important;
}
input[type="checkbox"]:disabled {
cursor: not-allowed;
}
.form-switch .form-check-input:not(:disabled) {
cursor: pointer;
}
.qna-poll-activity-row {
cursor: pointer;
}
.qna-poll-activity-row--selected > td {
background: var(--table-row-selected-bg);
}
input[type="checkbox"] {
}
/*--- Tom-Select ---*/
.ts-wrapper.multi .ts-control > div {
}
.ts-control, .ts-dropdown {
background-color: var(--surface-control-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.5rem !important;
color: var(--body-color) !important;
font-size: var(--fs-small) !important;
}
.ts-control:focus {
border: 1px solid var(--primary-color) !important;
}
.focus .ts-control{
box-shadow: none !important;
}
.ts-control:placeholder-shown {
font-weight: var(--fw-regular) !important;
color: var(--tertiary-text-color) !important;
}
.ts-control:not(:placeholder-shown) {
/* font-weight: var(--fw-medium) !important;*/
color: var(--secondary-text-color) !important;
}
.ts-control::placeholder {
font-size: var(--fs-medium) !important;
font-weight: var(--fw-regular) !important;
color: var(--tertiary-text-color) !important;
}
/* ---------- Control (base / closed state) ---------- */
select.ts-truncate + .ts-wrapper.single .ts-control {
--select-caret-button-width: 2rem;
--select-caret-button-bg: var(--surface-control-bg);
display: flex !important;
align-items: center !important;
position: relative;
overflow: hidden;
white-space: nowrap;
/* Reserve space for dropdown caret */
padding-right: calc(var(--select-caret-button-width) + .5rem) !important;
cursor: pointer !important;
}
select.ts-truncate + .ts-wrapper.single .ts-control::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--select-caret-button-width);
border-left: 1px solid var(--border-color);
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
background: var(--select-caret-button-bg);
pointer-events: none;
transition: background-color 0.2s ease;
z-index: 1;
}
select.ts-truncate + .ts-wrapper.single .ts-control::after {
content: "";
position: absolute;
top: 50%;
right: .5rem !important;
width: 1rem;
height: 1rem;
margin-top: 0 !important;
border: 0 !important;
background-image: var(--form-select-caret-icon);
background-position: center;
background-repeat: no-repeat;
background-size: 1rem 1rem;
pointer-events: none;
transform: translateY(-50%);
transition: transform 0.2s ease;
z-index: 2;
}
select.ts-truncate + .ts-wrapper.single:hover .ts-control,
select.ts-truncate + .ts-wrapper.single .ts-control:hover,
select.ts-truncate + .ts-wrapper.single .ts-control:hover input {
cursor: pointer !important;
}
select.ts-truncate + .ts-wrapper.single:not(.disabled):hover .ts-control,
select.ts-truncate + .ts-wrapper.single.dropdown-active .ts-control {
--select-caret-button-bg: var(--tertiary-bg);
}
select.ts-truncate + .ts-wrapper.single.dropdown-active .ts-control::after {
transform: translateY(-50%) rotate(180deg);
}
select.ts-truncate + .ts-wrapper.single.disabled .ts-control,
select.ts-truncate + .ts-wrapper.single.disabled .ts-control input {
cursor: not-allowed !important;
}
/* ---------- Selected item text (truncate by default) ---------- */
select.ts-truncate + .ts-wrapper.single .ts-control > .item,
select.ts-truncate + .ts-wrapper.single .ts-control > div {
min-width: 0; /* allow flex shrink */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: .5rem;
}
/* ---------- Internal search input (prevent extra height) ---------- */
select.ts-truncate + .ts-wrapper.single .ts-control input {
width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
flex: 0 0 auto !important;
}
/* Allow caret when typing */
select.ts-truncate + .ts-wrapper.single .ts-control input:focus {
width: 1px !important;
}
/* ---------- Focus / open state: show FULL selected text ---------- */
select.ts-truncate + .ts-wrapper.single.focus .ts-control,
select.ts-truncate + .ts-wrapper.single.dropdown-active .ts-control {
overflow: visible !important;
white-space: normal !important;
}
select.ts-truncate + .ts-wrapper.single.focus .ts-control > .item,
select.ts-truncate + .ts-wrapper.single.focus .ts-control > div,
select.ts-truncate + .ts-wrapper.single.dropdown-active .ts-control > .item,
select.ts-truncate + .ts-wrapper.single.dropdown-active .ts-control > div {
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
}
/* ---------- Dropdown options: always show full text ---------- */
select.ts-truncate + .ts-wrapper .ts-dropdown .option,
select.ts-truncate + .ts-wrapper .ts-dropdown .item {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3;
}
/* Optional: improve readability for long names */
select.ts-truncate + .ts-wrapper .ts-dropdown .option {
padding-top: .5rem;
padding-bottom: .5rem;
}
/* --- Dropdown (open state: show FULL text) --- */
select.ts-truncate + .ts-wrapper .ts-dropdown .option,
select.ts-truncate + .ts-wrapper .ts-dropdown .item {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3;
}
/* Improve readability for long promotion names */
select.ts-truncate + .ts-wrapper .ts-dropdown .option {
padding-top: .5rem;
padding-bottom: .5rem;
}
/*--- Tinymce --*/
.tox-promotion {
display: none;
}
.tox.tox-tinymce {
visibility: hidden;
height: 200px !important;
}
/*---Filepond--*/
.filepond--credits {
display: none !important;
}
.filepond-container-wrapper {
display: flex;
align-items: center; /* Align vertically in the center */
justify-content: space-between; /* Space between FilePond and the icon */
width: 100%;
}
.filepond-container {
position: relative;
width: 100%;
/* Adjust the size of the FilePond container if needed */
}
.filepond-view-icon {
cursor: pointer;
font-size: 20px; /* Adjust icon size */
margin-left: 10px; /* Space between FilePond and the icon */
display: inline-block;
align-self: center; /* Center icon vertically */
}
.filepond-view-icon i {
font-size: 24px; /* Icon size */
color: var(--legacy-color-hex-007bff); /* Icon color */
}
/*---Wizard---*/
.wizard,
.wizard .step-icon {
position: relative;
}
.wizard .step-icon {
width: 42px;
height: 42px;
margin-bottom: 10px;
background: white;
border: 2px solid var(--legacy-color-hex-ccc);
color: var(--legacy-color-hex-ccc);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.wizard .step-icon.active {
border: 2px solid var(--legacy-color-hex-007bff);
color: var(--legacy-color-hex-007bff);
/*font-size: 24px;*/
}
/*--- Table ---*/
div.dt-container {
width: 100%;
}
/*Small Table*/
th {
font-weight: var(--fw-semibold) !important;
font-size: var(--fs-medium) !important;
color: var(--dark-text-emphasis) !important;
}
td {
font-weight: var(--fw-regular) !important;
font-size: var(--fs-small) !important;
color: var(--dark-text-emphasis) !important;
}
td a.link {
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
color: var(--primary-color) !important;
}
td a.link:hover {
text-decoration: underline !important;
}
.table > :not(:last-child) > :last-child > * {
border-bottom: 1px solid var(--border-color) !important;
}
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--body-color);
--bs-table-border-color: var(--border-color);
--bs-table-hover-bg: var(--table-row-hover-bg);
background-color: transparent;
border-color: var(--border-color);
}
.table > :not(caption) > * > * {
background-color: var(--bs-table-bg);
border-bottom-color: var(--border-color);
color: var(--bs-table-color);
}
.table tbody tr:hover,
.table tbody tr:hover > * {
--bs-table-bg: var(--table-row-hover-bg);
background-color: var(--table-row-hover-bg);
}
.table-responsive {
overflow-x: auto; /* Enables horizontal scrolling */
max-width: 100%; /* Optional: Set a max width for the container */
}
/*Large Table*/
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
position: absolute;
display: block;
top: 25% !important;
right: 25% !important;
content: url("../icon/Misc/arrow-small-up.svg") !important;
filter: var(--table-sort-icon-filter);
}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
position: absolute;
display: block;
top: 45% !important;
left: 45% !important;
content: url("../icon/Misc/arrow-small-down.svg") !important;
filter: var(--table-sort-icon-filter);
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
width: 12px;
}
/*---Input Group---*/
/*.input-group {
display: flex;
align-items: center;
padding: 0rem 0.625rem !important;
padding: 0 !important;
margin: 0rem 0.625rem !important;
border-radius: 0.625rem;
border: 1px solid var(--legacy-color-hex-dedede);
}
.input-group input {
background: none;
border: none !important;
padding: 0.375rem !important;
}
.input-group input:focus {
background: none;
border: none !important;
box-shadow: none !important;
background: var(--tertiary-bg)
}
.input-group-text {
padding: .375rem .75rem !important;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--dark-text-emphasis);
background-color: transparent;
border: none;
}*/
/*.input-group {
display: flex;
align-items: center;
padding: 0;*/ /* Adjust padding inside the input group */
/*margin: 0;*/ /* Reset margin */
/*min-width: 100%;*/ /* Ensures the input group doesn't exceed the card width */
/*max-width: 100%;*/ /* Prevents the input group from expanding beyond the card */
/*border-radius: 0.625rem;
border: 1px solid var(--legacy-color-hex-dedede);
box-sizing: border-box;*/ /* Ensures padding and borders are included in the width calculation */
/*}
.input-group input {
background: none;
border: none;
padding: 0.375rem;
width: 100%;*/ /* Ensures the input stays within the boundaries of the group */
/*}
.input-group input:focus {
outline: none;
background: var(--tertiary-bg);*/ /* Custom background on focus */
/*box-shadow: none;*/ /* Remove default focus shadow */
/*}*/
/*Default - Input Group*/
.input-group-default input {
border-left: none;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
padding: 0.375rem;
width: 100%;
}
.input-group-text {
display: flex;
align-items: center;
width: fit-content;
height: 100%;
/*padding: 0.375rem 0.75rem;*/
padding: .25rem .5rem !important;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--dark-text-emphasis);
background-color: transparent;
border: 1px solid var(--color-border-control);
border-top-left-radius: .25rem !important;
border-bottom-left-radius: .25rem !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/*Password - Input Group*/
.input-group-password input {
border-right: none;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
padding: 0.375rem;
width: 100%;
}
.input-group-counter input {
border-right: none;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
padding: 0.375rem;
width: 100%;
}
.input-group-number input {
border-left: none;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
padding: 0.375rem;
width: 100%;
}
.input-group-pin {
display: flex;
align-items: center;
width: fit-content;
height: 100%;
padding: 0.375rem 0.75rem;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--dark-text-emphasis);
background-color: transparent;
border-top: 1px solid var(--color-border-control);
border-right: 1px solid var(--color-border-control);
border-bottom: 1px solid var(--color-border-control);
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: .5rem !important;
border-bottom-right-radius: .5rem !important;
cursor: pointer;
}
.input-group-pin:hover {
background-color: var(--primary-bg-subtle);
color: var(--primary-text-emphasis);
}
.input-group-unit {
display: flex;
align-items: center;
width: fit-content;
height: 100%;
padding: 0.375rem 0.75rem;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--dark-text-emphasis);
background-color: var(--dark-bg-subtle);
border-top: 1px solid var(--color-border-control);
border-right: 1px solid var(--color-border-control);
border-bottom: 1px solid var(--color-border-control);
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: .5rem !important;
border-bottom-right-radius: .5rem !important;
cursor: pointer;
}
.input-group-display {
display: flex;
align-items: center;
width: fit-content;
height: 100%;
padding: 0.375rem 0.75rem;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--dark-text-emphasis);
background-color: var(--dark-bg-subtle);
border: 1px solid var(--color-border-control);
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: .5rem !important;
border-bottom-left-radius: .5rem !important;
cursor: pointer;
}
/*---ECharts---*/
.eCharts {
width: 100% !important;
height: 320px !important;
position: relative !important;
}
/*Line-sm Chart*/
#data-display {
padding: 0px .675rem;
border-left: 6px solid var(--primary-color);
background: var(--legacy-color-rgba-255-255-255-0-8);
display: flex;
justify-content: space-between;
}
#value-display {
margin: 0;
font-size: var(--fs-large);
font-weight: var(--fw-medium);
}
/*---Cards---*/
.card {
background-color: var(--color-bg-surface) !important;
color: var(--body-color);
border: none !important;
border-radius: 0 !important;
}
.card-sm {
background-color: var(--surface-neutral-hover);
padding: .875rem 1rem !important;
margin: 0 !important;
border: 1px solid var(--color-border-default) !important;
}
.card-shadow {
box-shadow: var(--shadow-card-lg) !important;
}
.custom-card-sm {
padding: .875rem 1rem !important;
margin: 0 !important;
border: 1px solid var(--color-border-default) !important;
box-shadow: var(--shadow-card) !important;
}
.custom-card-lg {
padding: 2rem !important;
margin: 0 !important;
border: none !important;
border-radius: 0.75rem !important;
box-shadow: var(--shadow-card) !important;
width: 400px;
min-height: 500px;
display: flex;
flex-direction: column;
}
.auth-theme-logo {
aspect-ratio: 896 / 283;
background-image: var(--auth-logo-light);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
max-width: 100%;
width: var(--auth-logo-width, 140px);
}
html[data-theme="dark"] .auth-theme-logo {
background-image: var(--auth-logo-dark);
}
.auth-provider-button {
padding: .25rem 1.25rem !important;
font-weight: var(--fw-semibold) !important;
border-radius: .25rem !important;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.auth-provider-button-google {
background: var(--auth-provider-google-bg) !important;
border: 1px solid var(--auth-provider-google-bg) !important;
color: var(--auth-provider-google-text) !important;
}
.auth-provider-button-google:hover,
.auth-provider-button-google:focus {
background: var(--auth-provider-google-hover-bg) !important;
border-color: var(--auth-provider-google-hover-bg) !important;
color: var(--auth-provider-google-text) !important;
}
.auth-provider-button-google:disabled,
.auth-provider-button-google.disabled {
background: var(--auth-provider-google-bg) !important;
border-color: var(--auth-provider-google-bg) !important;
color: var(--auth-provider-google-text) !important;
opacity: .65;
}
.auth-back-button {
/*min-height: 36px;*/
padding: .25rem 1.25rem !important;
background: transparent !important;
border: 1px solid transparent !important;
color: var(--primary-text-emphasis) !important;
font-weight: var(--fw-semibold) !important;
border-radius: .25rem !important;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.auth-back-button:hover,
.auth-back-button:focus {
background: var(--secondary-bg) !important;
border-color: transparent !important;
color: var(--primary-text-emphasis) !important;
}
.auth-back-button:disabled,
.auth-back-button.disabled {
color: var(--tertiary-color) !important;
background: transparent !important;
border-color: transparent !important;
cursor: not-allowed;
opacity: .65;
}
.field-feedback {
min-height: 24px;
}
.auth-manual-setup {
border: 1px solid var(--border-color);
border-radius: 0.5rem;
padding: 0.625rem 0.75rem;
text-align: left;
}
.auth-manual-setup summary {
color: var(--primary-color);
cursor: pointer;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
list-style-position: inside;
text-align: center;
}
.auth-manual-setup-body {
display: grid;
gap: 0.5rem;
margin-top: 0.625rem;
}
.auth-copy-row {
align-items: center;
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
}
.auth-copy-control {
display: flex;
gap: 0.5rem;
min-width: 0;
}
.auth-copy-control .form-control {
min-width: 0;
}
.auth-copy-label {
margin-bottom: 0;
white-space: nowrap;
}
.auth-copy-action {
align-items: center;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-width: 25px;
min-height: 36px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.auth-resend-link {
font-size: inherit;
font-weight: var(--fw-semibold);
vertical-align: baseline;
}
.auth-resend-row .auth-resend-link.is-disabled,
.auth-resend-row .auth-resend-link.is-disabled:hover,
.auth-resend-row .auth-resend-link.is-disabled:focus {
color: var(--tertiary-color) !important;
cursor: not-allowed;
pointer-events: none;
text-decoration: none !important;
}
.auth-resend-row {
align-items: baseline;
display: flex;
gap: 0.25rem;
justify-content: center;
margin-bottom: 0;
margin-top: 0.5rem;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.loginbg .custom-card-lg {
width: min(400px, calc(100vw - 2rem));
min-height: 450px;
}
.auth-copy-row {
grid-template-columns: 80px minmax(0, 1fr);
}
}
.custom-card-lg .card-body-stack {
display: flex;
flex-direction: column;
flex: 1; /* fill card height */
}
.custom-card {
padding: .75rem .875rem !important;
margin: 0 !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
box-shadow: var(--legacy-color-rgba-0-0-0-0-1) 0px 4px 12px !important;
min-height: 154px !important;
}
.custom-card:hover {
background-color: var(--primary-bg-subtle) !important;
box-shadow: var(--legacy-color-rgba-0-0-0-0-2) 0px 4px 12px !important;
}
/*---Pagination--*/
nav .pagination {
font-size: var(--fs-medium) !important;
font-weight: var(--fw-medium) !important;
border: 1px solid var(--legacy-color-hex-dedede) !important;
border-radius: .25rem !important;
width: fit-content !important;
}
nav .page-link {
border: none !important;
}
nav .page-item.page-link .active {
border: none !important;
}
/*---Popover--*/
.popover {
}
.popover-body {
padding: 0.5rem !important;
color: var(--dark-text-emphasis) !important;
}
/*--- Footer ---*/
.footer {
background-color: var(--legacy-color-hex-333);
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
.spinner-border-xs {
width: 0.75rem;
height: 0.75rem;
border-width: 0.15em;
}
/*---SweetAler2 & Lottie - Loading ---*/
.swal2-content {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
div:where(.swal2-container) div:where(.swal2-popup) {
border-radius: 12px !important;
width: 320px !important;
}
div:where(.swal2-container) h2:where(.swal2-title) {
font-size: var(--fs-xl) !important;
font-weight: 500 !important;
padding: 1em 1em 0 !important;
}
div:where(.swal2-container) .swal2-html-container {
padding: 0.5em 1em 1em !important;
font-size: 1em !important;
}
div:where(.swal2-container) div:where(.swal2-actions) {
margin: 1em auto 0 !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
border: 0;
border-radius: 12px !important;
background: initial;
background-color: var(--primary-color) !important;
font-weight: var(--fw-medium) !important;
font-size: var(--fs-small) !important;
padding: 0.5rem !important;
border-radius: 0.5rem !important;
border: none !important;
box-shadow: none !important;
width: 280px;
}
div:where(.swal2-container) img:where(.swal2-image) {
max-width: 100%;
margin: 1em auto 0 !important;
}
}
/*Toast & Lottie*/
.toast-container {
z-index: 1100;
}
.toast {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-radius: 0px;
box-shadow: var(--shadow-dropdown);
border: none;
}
.toast-body {
background-color: var(--color-bg-surface);
color: var(--body-color);
padding: 12px;
display: flex;
flex-direction: column;
}
.toast .toast-header {
background-color: var(--color-bg-surface) !important;
color: var(--body-color) !important;
border-bottom: none !important;
}
.toast .btn-close {
filter: var(--toast-close-filter);
opacity: 0.85;
border-radius: 4px !important;
}
.toast .btn-close:hover,
.toast .btn-close:focus {
filter: var(--toast-close-filter);
opacity: 1;
box-shadow: none !important;
}
#loading-toast {
z-index: 1100;
}
#loading-toast .toast {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-radius: 0px;
box-shadow: var(--shadow-dropdown);
border: none;
}
#loading-toast .toast-header {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-bottom: none;
padding: 12px 12px 0px;
display: flex;
align-items: center;
}
#loading-toast .toast-body {
padding: 16px;
}
#loading-toast .btn-close {
margin-left: 8px;
margin-bottom: 2px;
}
#success-toast {
z-index: 1100;
}
#success-toast .toast {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-radius: 0px;
box-shadow: var(--shadow-dropdown);
border: none;
animation: fadeIn 0.3s ease-in-out;
}
#success-toast .toast-header {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-bottom: none;
padding: 12px 12px 0px;
display: flex;
align-items: center;
}
#success-toast .toast-body {
padding: 16px;
}
#success-toast .text-success {
color: var(--success-color);
}
#success-toast .btn-close {
margin-left: 8px;
margin-bottom: 2px;
}
#error-toast {
z-index: 1100;
}
#error-toast .toast {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-radius: 0px;
box-shadow: var(--shadow-dropdown);
border: none;
border-left: 4px solid var(--danger-color);
animation: fadeIn 0.3s ease-in-out;
}
#error-toast .toast-header {
background-color: var(--color-bg-surface);
color: var(--body-color);
border-bottom: none;
padding: 12px 12px 0px;
display: flex;
align-items: center;
}
#error-toast .toast-body {
padding: 16px;
}
#error-toast .text-danger {
color: var(--danger-text-emphasis);
}
#error-toast .btn-close {
margin-left: 8px;
margin-bottom: 2px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*---File Display---*/
.file-display {
padding: 0.5rem 0.625rem;
border: 1px solid var(--legacy-color-hex-dedede);
border-radius: 6px;
background: var(--legacy-color-rgba-241-241-241-1);
}
.file-name {
font-weight: var(--fw-semibold);
font-size: var(--fs-medium);
}
.file-size {
font-weight: var(--fw-regular);
font-size: var(--fs-small);
}
.heading1:focus-visible {
outline: none;
border: none;
box-shadow: none;
}
/* Custom style for the Bootstrap date picker */
.datepicker {
font-size: 10px;
border-radius: .25rem; /* Ensure rounded borders for consistent Bootstrap styling */
box-shadow: 0 0 10px var(--legacy-color-rgba-0-0-0-0-1);
}
/* Customize the header of the date picker (month/year selector) */
.datepicker .datepicker-days .datepicker-switch {
padding: 6px 10px;
border-radius: .25rem;
}
/* Customize the navigation buttons (prev/next month buttons) */
.datepicker .datepicker-days th.prev, .datepicker .datepicker-days th.next, .datepicker .datepicker-switch th.prev, .datepicker .datepicker-switch th.next {
color: var(--legacy-color-hex-007bff) !important;
border-radius: .25rem;
}
/* Highlight selected date */
.datepicker .datepicker-days td.today, .datepicker .datepicker-days td.focused {
background-color: var(--legacy-color-hex-28a745);
color: white;
border-radius: .25rem;
}
/* Adjust the footer of the datepicker if using a footer */
.datepicker .datepicker-footer {
padding: 10px;
background-color: var(--legacy-color-hex-f8f9fa);
border-top: 1px solid var(--legacy-color-hex-ddd);
text-align: center;
}
}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
background: var(--legacy-color-hex-f1f1f1) !important;
color: var(--legacy-color-hex-999);
cursor: default;
}
.datepicker td, .datepicker th {
border-radius: 0 !important;
}
/* Style for the individual day cells */
.datepicker .datepicker-days td {
padding: 10px;
text-align: center;
}
/* Add hover effects for dates */
.datepicker .datepicker-days td:hover {
background-color: var(--legacy-color-hex-f1f1f1) !important;
cursor: pointer;
}
/* Disable days */
.datepicker .datepicker-days td.disabled {
background-color: var(--legacy-color-hex-f1f1f1) !important;
color: var(--legacy-color-hex-ccc);
}
/* Styling for the selected day */
.datepicker .datepicker-days td.selected {
background-color: var(--legacy-color-hex-007bff);
color: white;
font-weight: bold;
}
.datepicker table tr td span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 42px !important;
line-height: 42px !important;
}
.datepicker .datepicker-switch, .datepicker .next, .datepicker .prev, .datepicker tfoot tr th {
padding: 8px 12px !important;
}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active:active,
.datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover:active {
background-color: var(--legacy-color-hex-0078d4) !important;
color: var(--legacy-color-hex-fff) !important;
}
/*global-loading-css*/
.global-loading-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--body-bg);
display: grid;
place-items: center;
}
.global-loading-center {
display: flex;
/*flex-direction: column;*/
align-items: center;
justify-content: center;
gap: 12px;
padding: 0px;
text-align: center;
}
.global-loading-logo {
aspect-ratio: 896 / 283;
background-image: var(--global-loading-logo-light);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: min(52vw, 253px);
}
html[data-theme="dark"] .global-loading-logo {
background-image: var(--global-loading-logo-dark);
}
.global-loading-spinner {
width: 80px;
height: 80px;
border: 10px solid var(--loading-spinner-track);
border-top-color: var(--loading-spinner-active);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.global-loading-text {
font-size: 14px;
font-weight: 600;
color: var(--body-color);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/*textarea-css*/
textarea {
font-family: var(--ff-primary) !important;
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular);
}
textarea.form-control:focus {
border: 1px solid var(--primary-text-emphasis) !important;
box-shadow: none !important;
}
textarea.form-control:placeholder-shown {
font-weight: var(--fw-regular) !important;
}
textarea.form-control:not(:placeholder-shown) {
/*font-weight: var(--fw-semibold) !important;*/
font-weight: var(--fw-regular) !important;
color: var(--dark-text-emphasis) !important;
}
textarea.form-control::placeholder {
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
}
/*icon-btn-css*/
.action-buttons {
display: flex;
gap: 8px;
}
/* Square icon button */
.icon-btn {
width: 36px;
height: 36px;
/*border: 1px solid var(--legacy-color-hex-ced4da);*/ /* light gray */
border: 1px solid var(--primary-color);
background: transparent;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--primary-color);
transition: all 0.15s ease-in-out;
}
/* Icon size */
.icon-btn i {
font-size: 16px;
line-height: 1;
}
/* Hover state */
.icon-btn:hover {
background-color: var(--primary-bg-subtle);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Disabled */
.icon-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/*global disable css for div/input/button*/
.disabled-block {
pointer-events: none;
opacity: 0.5;
}
/* Moderator panel */
.moderator-panel button {
font: inherit;
}
.moderator-panel__sidebar {
min-height: 100vh;
padding: 28px 18px;
background: var(--legacy-color-hex-18202b);
color: var(--legacy-color-hex-ffffff);
overflow-y: auto;
}
.moderator-panel__brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.moderator-panel__mark {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--legacy-color-hex-39d98a);
color: var(--legacy-color-hex-111827);
font-size: var(--fs-2xl);
font-weight: var(--fw-extrabold);
}
.moderator-panel__brand h1,
.moderator-panel__topbar h2,
.moderator-panel__empty h3,
.moderator-panel__qanda-header h3,
.moderator-panel__column-heading h4 {
margin: 0;
letter-spacing: 0;
}
.moderator-panel__brand h1 {
font-size: var(--fs-2xl);
line-height: 1.15;
color: var(--legacy-color-hex-ffffff);
}
.moderator-panel__eyebrow {
margin: 0 0 4px;
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0;
text-transform: uppercase;
}
.moderator-panel__sidebar .moderator-panel__eyebrow {
color: var(--legacy-color-hex-9ca3af);
}
.moderator-panel__agenda {
display: grid;
gap: 22px;
}
.moderator-panel__day {
display: grid;
gap: 14px;
}
.moderator-panel__day-title {
color: var(--legacy-color-hex-d1d5db);
font-size: var(--fs-small);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.moderator-panel__track {
display: grid;
gap: 8px;
}
.moderator-panel__track-title {
color: var(--legacy-color-hex-9ca3af);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.moderator-panel__activity--active {
border-color: var(--legacy-color-hex-ffb45a);
background: var(--legacy-color-hex-fff2df);
}
.moderator-panel__main {
min-width: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 22px;
padding: 28px;
overflow: hidden;
}
.moderator-panel__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.moderator-panel__topbar h2 {
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
color: var(--legacy-color-hex-111827);
}
.moderator-panel__event-id {
display: grid;
gap: 4px;
min-width: 230px;
padding: 12px 14px;
border: 1px solid var(--legacy-color-hex-e0ded8);
border-radius: 8px;
background: var(--legacy-color-hex-ffffff);
}
.moderator-panel__event-id span {
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.moderator-panel__event-id strong {
color: var(--legacy-color-hex-111827);
font-size: var(--fs-xs);
overflow-wrap: anywhere;
}
.moderator-panel__activity-detail,
.moderator-panel__qanda,
.moderator-panel__empty {
border: 1px solid var(--legacy-color-hex-e0ded8);
border-radius: 8px;
background: var(--legacy-color-hex-ffffff);
}
.moderator-panel__activity-detail {
display: grid;
gap: 18px;
padding: 18px;
}
.moderator-panel__session-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.moderator-panel__session-meta span {
padding: 5px 10px;
border-radius: 999px;
background: var(--legacy-color-hex-eef2f7);
color: var(--legacy-color-hex-374151);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.moderator-panel__features {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 14px;
}
.moderator-panel__feature {
min-height: 96px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px 12px;
padding: 16px;
border: 1px solid var(--legacy-color-hex-d7d3cb);
border-radius: 8px;
background: var(--legacy-color-hex-fbfaf7);
color: var(--legacy-color-hex-111827);
text-align: left;
cursor: pointer;
}
.moderator-panel__feature i {
grid-row: span 2;
font-size: var(--fs-2xl);
}
.moderator-panel__feature span {
font-size: var(--fs-large);
font-weight: var(--fw-extrabold);
}
.moderator-panel__feature strong {
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.moderator-panel__feature--active {
border-color: var(--legacy-color-hex-139b62);
background: var(--legacy-color-hex-e8f8ef);
}
.moderator-panel__feature--off {
opacity: 0.55;
cursor: not-allowed;
}
.moderator-panel__empty {
display: grid;
place-content: center;
min-height: 340px;
padding: 34px;
text-align: center;
}
.moderator-panel__empty--compact {
min-height: 210px;
}
.moderator-panel__empty h3 {
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
}
.moderator-panel__empty p {
max-width: 560px;
margin: 10px auto 0;
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-medium);
}
.moderator-panel__qanda {
min-height: 0;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 16px;
padding: 18px;
overflow: hidden;
}
.moderator-panel__qanda-header,
.moderator-panel__column-heading,
.moderator-panel__question-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.moderator-panel__qanda-header h3 {
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
}
.moderator-panel__ghost-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 13px;
border: 1px solid var(--legacy-color-hex-d7d3cb);
border-radius: 8px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-111827);
font-weight: var(--fw-extrabold);
}
.moderator-panel__question-columns {
min-height: 0;
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 14px;
overflow: hidden;
}
.moderator-panel__question-column {
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 8px;
background: var(--legacy-color-hex-f6f3ee);
overflow-y: auto;
}
.moderator-panel__column-heading h4 {
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
}
.moderator-panel__column-heading span {
min-width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--legacy-color-hex-111827);
color: var(--legacy-color-hex-ffffff);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
}
.moderator-panel__question {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--legacy-color-hex-e1ddd5);
border-radius: 8px;
background: var(--legacy-color-hex-ffffff);
}
.moderator-panel__question p {
margin: 0;
color: var(--legacy-color-hex-111827);
line-height: 1.45;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.moderator-panel__question-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.moderator-panel__question-footer {
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
}
.moderator-panel__actions {
display: flex;
gap: 8px;
}
.moderator-panel__actions button {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--legacy-color-hex-d7d3cb);
border-radius: 8px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-111827);
}
.moderator-panel__actions button:first-child,
.moderator-panel__actions button.moderator-panel__action-button--approve {
border-color: var(--legacy-color-hex-139b62);
color: var(--legacy-color-hex-0f7a4e);
}
.moderator-panel__actions button:last-child,
.moderator-panel__actions .moderator-panel__action-button--reject {
border-color: var(--legacy-color-hex-c2410c);
color: var(--legacy-color-hex-c2410c);
}
.moderator-panel__actions button.moderator-panel__action-button--approve {
border-color: var(--legacy-color-hex-139b62);
color: var(--legacy-color-hex-0f7a4e);
}
.moderator-panel__notice {
padding: 12px 14px;
border-radius: 8px;
background: var(--legacy-color-hex-eef2f7);
color: var(--legacy-color-hex-374151);
font-size: var(--fs-medium);
font-weight: var(--fw-bold);
}
.moderator-panel__notice--error {
background: var(--legacy-color-hex-fee2e2);
color: var(--legacy-color-hex-991b1b);
}
.moderator-panel__muted {
margin: 8px 0 0;
color: var(--legacy-color-hex-6b7280);
font-size: var(--fs-small);
}
@media (max-width: 980px) {
.moderator-panel {
grid-template-columns: 1fr;
}
.moderator-panel__sidebar {
min-height: auto;
max-height: 44vh;
}
.moderator-panel__main {
min-height: 56vh;
overflow: visible;
}
.moderator-panel__question-columns,
.moderator-panel__features {
grid-template-columns: 1fr;
}
.moderator-panel__topbar {
align-items: stretch;
flex-direction: column;
}
.moderator-panel__event-id {
min-width: 0;
}
}
/* Moderator panel landscape shell */
.moderator-panel {
min-height: 100vh;
display: grid;
grid-template-rows: 322px minmax(0, 1fr);
grid-template-columns: 1fr;
background: var(--legacy-color-hex-eeeeee);
color: var(--legacy-color-hex-252f3a);
font-family: var(--ff-primary);
}
.moderator-panel__header {
/* position: relative;*/
display: grid;
grid-template-columns: 220px 1fr 220px;
align-items: start;
padding: 20px 20px 0;
background: var(--legacy-color-hex-ff9514);
color: var(--legacy-color-hex-ffffff);
}
.moderator-panel__logo {
width: 110px;
max-height: 40px;
object-fit: contain;
margin-top: 7px;
}
.moderator-panel__header h1 {
margin: 10px 0 0;
color: var(--legacy-color-hex-ffffff);
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
line-height: 1.2;
text-align: center;
letter-spacing: 0;
}
.moderator-panel__back,
.moderator-panel__fullscreen {
min-height: 45px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid var(--legacy-color-rgba-255-255-255-0-48);
border-radius: 5px;
background: var(--legacy-color-rgba-255-255-255-0-18);
color: var(--legacy-color-hex-ffffff);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
}
.moderator-panel__back {
justify-self: end;
min-width: 154px;
}
.moderator-panel__back i,
.moderator-panel__fullscreen i {
display: inline-flex;
font-size: var(--fs-xl);
line-height: 1;
}
.moderator-panel__workspace {
min-height: 0;
display: flex;
justify-content: center;
padding: 0 24px 82px;
margin-top: -211px;
}
.moderator-panel__surface {
width: min(80vw, 1536px);
min-width: min(100%, 860px);
height: min(708px, calc(100vh - 172px));
min-height: 430px;
display: flex;
flex-direction: column;
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
overflow: hidden;
}
.moderator-panel--poll-screen {
grid-template-rows: 94px minmax(0, 1fr);
background: var(--legacy-color-hex-eeeeee);
}
.moderator-panel--poll-screen .moderator-panel__workspace {
justify-content: stretch;
padding: 24px 42px 82px;
margin-top: 0;
}
.moderator-panel--poll-screen .moderator-panel__surface {
width: 100%;
min-width: 0;
height: auto;
min-height: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.moderator-panel--poll-screen .moderator-panel__session-view {
height: auto;
min-height: 0;
gap: 18px;
padding: 0;
}
.moderator-panel--poll-screen .moderator-panel__surface-head,
.moderator-panel--poll-screen .moderator-panel__features {
display: none;
}
.moderator-panel__tracks-view,
.moderator-panel__session-view {
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
padding: 26px 28px;
}
.moderator-panel__surface-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.moderator-panel__surface-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.moderator-panel__surface-head h2 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
line-height: 1.2;
letter-spacing: 0;
}
.moderator-panel__eyebrow {
margin: 0 0 4px;
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
text-transform: uppercase;
}
.moderator-panel__event-id {
min-width: 240px;
display: grid;
gap: 4px;
padding: 10px 12px;
border: 1px solid var(--legacy-color-hex-e6e6e6);
border-radius: 5px;
background: var(--legacy-color-hex-f8f8f8);
}
.moderator-panel__event-id span,
.moderator-panel__event-id strong {
font-size: var(--fs-xs);
line-height: 1.25;
}
.moderator-panel__event-id span {
color: var(--legacy-color-hex-7a838d);
font-weight: var(--fw-extrabold);
}
.moderator-panel__event-id strong {
color: var(--legacy-color-hex-252f3a);
font-weight: var(--fw-bold);
overflow-wrap: anywhere;
}
.moderator-panel__agenda {
min-height: 0;
display: grid;
gap: 20px;
overflow-y: auto;
padding-right: 6px;
}
.moderator-panel__day {
display: grid;
gap: 12px;
}
.moderator-panel__day-title {
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.moderator-panel__track-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.moderator-panel__track {
display: grid;
align-content: start;
gap: 10px;
padding: 14px;
border: 1px solid var(--legacy-color-hex-ececec);
border-radius: 5px;
background: var(--legacy-color-hex-fafafa);
}
.moderator-panel__track-title {
color: var(--legacy-color-hex-616b76);
font-size: var(--fs-small);
font-weight: var(--fw-extrabold);
}
.moderator-panel__activity {
width: 100%;
min-height: 62px;
display: grid;
gap: 8px;
padding: 11px 12px;
border: 1px solid var(--legacy-color-hex-e3e3e3);
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-17202a);
text-align: left;
cursor: pointer;
}
.moderator-panel__activity:hover {
border-color: var(--legacy-color-hex-ffb45a);
box-shadow: 0 6px 18px var(--legacy-color-rgba-37-47-58-0-08);
background: var(--legacy-color-hex-fff2df);
}
.moderator-panel__activity-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.moderator-panel__activity-badges span {
padding: 2px 7px;
border-radius: 999px;
background: var(--legacy-color-hex-fff2df);
color: var(--legacy-color-hex-b45309);
font-size: var(--fs-2xs);
font-weight: var(--fw-extrabold);
}
.moderator-panel__feature-summary {
align-self: center;
padding: 7px 12px;
border-radius: 999px;
background: var(--legacy-color-hex-fff2df);
color: var(--legacy-color-hex-b45309);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
}
.moderator-panel__features {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 14px;
}
.moderator-panel__feature {
min-height: 88px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px 12px;
padding: 16px;
border: 1px solid var(--legacy-color-hex-e3e3e3);
border-radius: 5px;
background: var(--legacy-color-hex-fafafa);
color: var(--legacy-color-hex-17202a);
text-align: left;
cursor: pointer;
}
.moderator-panel__feature i {
grid-row: span 2;
font-size: var(--fs-2xl);
}
.moderator-panel__feature span {
font-size: var(--fs-large);
font-weight: var(--fw-extrabold);
}
.moderator-panel__feature strong {
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.moderator-panel__feature--active {
border-color: var(--legacy-color-hex-ff9514);
background: var(--legacy-color-hex-fff7ed);
}
.moderator-panel__feature--off {
opacity: 0.55;
cursor: not-allowed;
}
.moderator-panel__empty {
flex: 1;
min-height: 0;
display: grid;
place-content: center;
padding: 34px;
border: 0;
border-radius: 0;
background: var(--legacy-color-hex-ffffff);
text-align: center;
}
.moderator-panel__empty--compact {
min-height: 170px;
flex: 0 0 auto;
border: 1px solid var(--legacy-color-hex-ececec);
border-radius: 5px;
background: var(--legacy-color-hex-fafafa);
}
.moderator-panel__empty h3 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
}
.moderator-panel__empty p {
max-width: 560px;
margin: 10px auto 0;
color: var(--legacy-color-hex-68727d);
font-size: var(--fs-medium);
}
.moderator-panel__qanda {
min-height: 0;
flex: 1;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 14px;
padding: 0;
border: 0;
border-radius: 0;
background: var(--legacy-color-hex-ffffff);
overflow: hidden;
}
.moderator-panel__qanda-header,
.moderator-panel__column-heading,
.moderator-panel__question-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.moderator-panel__qanda-header h3 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-2xl);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
}
.moderator-panel__ghost-button {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 13px;
border: 1px solid var(--legacy-color-hex-e3e3e3);
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-17202a);
font-weight: var(--fw-extrabold);
}
.moderator-panel__question-columns {
min-height: 0;
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 14px;
overflow: hidden;
}
.moderator-panel__question-column {
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 5px;
background: var(--legacy-color-hex-f4f4f4);
overflow-y: auto;
}
.moderator-panel__column-heading h4 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
}
.moderator-panel__column-heading span {
min-width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--legacy-color-hex-ff9514);
color: var(--legacy-color-hex-ffffff);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
}
.moderator-panel__question {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--legacy-color-hex-e5e5e5);
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
}
.moderator-panel__question p {
margin: 0;
color: var(--legacy-color-hex-17202a);
line-height: 1.45;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.moderator-panel__question-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
color: var(--legacy-color-hex-68727d);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.moderator-panel__question-footer {
color: var(--legacy-color-hex-68727d);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
}
.moderator-panel__actions {
display: flex;
gap: 8px;
}
.moderator-panel__actions button {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--legacy-color-hex-e3e3e3);
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-17202a);
}
.moderator-panel__actions button:first-child,
.moderator-panel__actions button.moderator-panel__action-button--approve {
border-color: var(--legacy-color-hex-16a34a);
color: var(--legacy-color-hex-15803d);
}
.moderator-panel__actions button:last-child,
.moderator-panel__actions .moderator-panel__action-button--reject {
border-color: var(--legacy-color-hex-ea580c);
color: var(--legacy-color-hex-c2410c);
}
.moderator-panel__actions button.moderator-panel__action-button--approve {
border-color: var(--legacy-color-hex-16a34a);
color: var(--legacy-color-hex-15803d);
}
.moderator-panel__notice {
padding: 12px 14px;
border-radius: 5px;
background: var(--legacy-color-hex-fff7ed);
color: var(--legacy-color-hex-9a4b05);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
}
.moderator-panel__muted {
margin: 8px 0 0;
color: var(--legacy-color-hex-68727d);
font-size: var(--fs-small);
}
.moderator-panel__fullscreen {
position: fixed;
right: 39px;
bottom: 23px;
z-index: 20;
min-width: 135px;
background: var(--legacy-color-hex-ffb457);
border-color: var(--legacy-color-hex-ffb457);
}
@media (max-width: 1100px) {
.moderator-panel {
grid-template-rows: 94px minmax(0, 1fr);
}
.moderator-panel__header {
grid-template-columns: 150px 1fr 170px;
}
.moderator-panel__workspace {
margin-top: -150px;
padding-inline: 16px;
}
.moderator-panel__surface {
width: 100%;
min-width: 0;
height: calc(100vh - 128px);
}
}
@media (max-width: 760px) {
.moderator-panel__header {
grid-template-columns: 1fr;
justify-items: center;
gap: 8px;
padding-top: 16px;
}
.moderator-panel__logo,
.moderator-panel__back {
justify-self: center;
}
.moderator-panel__surface-head,
.moderator-panel__features,
.moderator-panel__question-columns {
grid-template-columns: 1fr;
}
.moderator-panel__surface-head {
flex-direction: column;
}
.moderator-panel__event-id {
min-width: 0;
width: 100%;
}
.moderator-panel__fullscreen {
right: 16px;
bottom: 16px;
}
}
/* Projector panel */
.projector-panel {
min-height: 100vh;
display: grid;
grid-template-rows: 322px minmax(0, 1fr);
grid-template-columns: 1fr;
background: var(--legacy-color-hex-eeeeee);
color: var(--legacy-color-hex-252f3a);
font-family: var(--ff-primary);
}
.projector-panel button {
font: inherit;
}
.projector-panel__header {
display: grid;
grid-template-columns: 220px 1fr 220px;
align-items: start;
padding: 20px 20px 0;
background: var(--legacy-color-hex-ff9514);
color: var(--legacy-color-hex-ffffff);
}
.projector-panel__logo {
width: 110px;
max-height: 40px;
object-fit: contain;
margin-top: 7px;
}
.projector-panel__header h1 {
margin: 10px 0 0;
color: var(--legacy-color-hex-ffffff);
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
line-height: 1.2;
text-align: center;
letter-spacing: 0;
}
.projector-panel__back,
.projector-panel__fullscreen,
.projector-panel__ghost-button {
min-height: 45px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 5px;
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
}
.projector-panel__back {
justify-self: end;
min-width: 154px;
border: 1px solid var(--legacy-color-rgba-255-255-255-0-48);
background: var(--legacy-color-rgba-255-255-255-0-18);
color: var(--legacy-color-hex-ffffff);
}
.projector-panel__back i,
.projector-panel__fullscreen i,
.projector-panel__ghost-button i,
.moderator-panel__card-fullscreen i,
.projector-panel__card-fullscreen i {
display: inline-flex;
font-size: var(--fs-xl);
line-height: 1;
}
.projector-panel__workspace {
min-height: 0;
display: flex;
justify-content: center;
padding: 0 24px 82px;
margin-top: -211px;
}
.projector-panel__surface {
width: min(80vw, 1536px);
min-width: min(100%, 860px);
height: min(708px, calc(100vh - 172px));
min-height: 0;
display: flex;
flex-direction: column;
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
overflow: hidden;
}
.projector-panel--poll-screen {
grid-template-rows: 94px minmax(0, 1fr);
background: var(--legacy-color-hex-eeeeee);
}
.projector-panel--poll-screen .projector-panel__workspace {
justify-content: stretch;
padding: 24px 42px 82px;
margin-top: 0;
}
.projector-panel--poll-screen .projector-panel__surface {
width: 100%;
min-width: 0;
height: auto;
min-height: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.projector-panel--poll-screen .projector-panel__session-view {
height: auto;
min-height: 0;
gap: 18px;
padding: 0;
}
.projector-panel--poll-screen .projector-panel__qanda-header h2 {
font-size: var(--fs-3xl);
}
.projector-panel__tracks-view,
.projector-panel__session-view,
.projector-panel__qanda-view {
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
padding: 26px 28px;
}
.projector-panel__surface-head,
.projector-panel__qanda-header,
.projector-panel__question-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.projector-panel__surface-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.projector-panel__surface-head h2,
.projector-panel__qanda-header h2 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
line-height: 1.2;
letter-spacing: 0;
}
.projector-panel__eyebrow {
margin: 0 0 4px;
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
text-transform: uppercase;
}
.projector-panel__agenda {
min-height: 0;
display: grid;
gap: 20px;
overflow-y: auto;
padding-right: 6px;
}
.projector-panel__day {
display: grid;
gap: 12px;
}
.projector-panel__day-title {
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.projector-panel__track-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.projector-panel__track {
display: grid;
align-content: start;
gap: 10px;
padding: 14px;
border: 1px solid var(--legacy-color-hex-ececec);
border-radius: 5px;
background: var(--legacy-color-hex-fafafa);
}
.projector-panel__track-title {
color: var(--legacy-color-hex-616b76);
font-size: var(--fs-small);
font-weight: var(--fw-extrabold);
}
.projector-panel__activity {
width: 100%;
min-height: 62px;
display: grid;
gap: 8px;
padding: 11px 12px;
border: 1px solid var(--legacy-color-hex-e3e3e3);
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-17202a);
text-align: left;
cursor: pointer;
}
.projector-panel__activity:hover {
border-color: var(--legacy-color-hex-ffb45a);
box-shadow: 0 6px 18px var(--legacy-color-rgba-37-47-58-0-08);
}
.projector-panel__activity-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.projector-panel__activity-badges span,
.projector-panel__feature-summary {
padding: 2px 7px;
border-radius: 999px;
background: var(--legacy-color-hex-fff2df);
color: var(--legacy-color-hex-b45309);
font-size: var(--fs-2xs);
font-weight: var(--fw-extrabold);
}
.projector-panel__feature-summary {
align-self: center;
padding: 7px 12px;
font-size: var(--fs-xs);
}
.projector-panel__features {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 14px;
}
.projector-panel__feature {
min-height: 88px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px 12px;
padding: 16px;
border: 1px solid var(--legacy-color-hex-e3e3e3);
border-radius: 5px;
background: var(--legacy-color-hex-fafafa);
color: var(--legacy-color-hex-17202a);
text-align: left;
cursor: pointer;
}
.projector-panel__feature i {
grid-row: span 2;
font-size: var(--fs-2xl);
}
.projector-panel__feature span {
font-size: var(--fs-large);
font-weight: var(--fw-extrabold);
}
.projector-panel__feature strong {
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.projector-panel__feature--active {
border-color: var(--legacy-color-hex-ff9514);
background: var(--legacy-color-hex-fff7ed);
}
.projector-panel__feature--off {
opacity: 0.55;
cursor: not-allowed;
}
.projector-panel__header-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.moderator-panel__header-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.projector-panel__ghost-button {
min-height: 40px;
padding: 8px 13px;
border: 1px solid var(--legacy-color-hex-e3e3e3);
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-17202a);
}
.projector-panel__question-grid {
min-height: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
align-content: start;
gap: 24px;
overflow-y: auto;
padding-right: 8px;
}
.projector-panel__question-card {
position: relative;
min-height: 330px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 30px 30px 32px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-252f3a);
border: 1px solid var(--legacy-color-hex-ececec);
box-shadow: 0 10px 26px var(--legacy-color-rgba-37-47-58-0-06);
}
.moderator-panel__card-fullscreen,
.projector-panel__card-fullscreen {
position: absolute;
top: 29px;
right: 27px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--legacy-color-hex-c9c9c9);
}
.projector-panel__vote-count {
display: flex;
align-items: baseline;
gap: 10px;
padding-right: 44px;
padding-bottom: 16px;
border-bottom: 1px solid var(--legacy-color-hex-d1d1d1);
}
.projector-panel__vote-count strong {
color: var(--legacy-color-hex-000000);
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
line-height: 1;
}
.projector-panel__vote-count span {
color: var(--legacy-color-hex-8e98a6);
font-size: var(--fs-small);
}
.projector-panel__question-card p {
flex: 1;
margin: 0;
color: var(--legacy-color-hex-252f3a);
font-size: clamp(1.35rem, 1.2rem + 0.45vw, 1.9rem);
line-height: 1.36;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.projector-panel__question-asker {
display: inline-flex;
align-items: center;
gap: 10px;
padding-top: 16px;
border-top: 1px solid var(--legacy-color-hex-e3e3e3);
color: var(--legacy-color-hex-8e98a6);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
}
.projector-panel__question-asker i {
display: inline-flex;
color: var(--legacy-color-hex-9ca3af);
font-size: var(--fs-xl);
line-height: 1;
}
.projector-panel__question-card:fullscreen {
width: 100vw;
height: 100vh;
justify-content: flex-start;
gap: 48px;
padding: calc(76px + 7vh) 8vw 7vh;
background: var(--legacy-color-hex-ffffff);
border: 0;
box-shadow: none;
}
.projector-panel__question-card:fullscreen::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 76px;
background: var(--legacy-color-hex-ff9514);
}
.projector-panel__question-card:fullscreen .projector-panel__card-fullscreen {
position: fixed;
top: 13px;
right: 18px;
z-index: 2;
width: 50px;
height: 50px;
color: var(--legacy-color-hex-ffffff);
}
.projector-panel__question-card:fullscreen .projector-panel__card-fullscreen i {
display: none;
}
.projector-panel__question-card:fullscreen .projector-panel__card-fullscreen::before {
content: "×";
color: var(--legacy-color-hex-ffffff);
font-size: 56px;
font-weight: var(--fw-bold);
line-height: 0.8;
}
.projector-panel__question-card:fullscreen .projector-panel__vote-count strong {
font-size: clamp(2.2rem, 4vw, 5.5rem);
}
.projector-panel__question-card:fullscreen .projector-panel__vote-count span {
font-size: clamp(1.2rem, 1.5vw, 2rem);
}
.projector-panel__question-card:fullscreen p {
flex: 0 0 auto;
font-size: clamp(2.35rem, 3.8vw, 5.5rem);
line-height: 1.16;
}
.projector-panel__question-card:fullscreen .projector-panel__question-asker {
gap: 18px;
padding-top: 30px;
border-top-color: var(--legacy-color-hex-d1d1d1);
font-size: clamp(1.25rem, 1.6vw, 2.3rem);
}
.projector-panel__question-card:fullscreen .projector-panel__question-asker i {
font-size: clamp(1.7rem, 2.2vw, 3.2rem);
}
.projector-panel__question-card--expanded {
position: fixed;
inset: 0;
z-index: 60;
width: 100vw;
height: 100vh;
justify-content: flex-start;
gap: 48px;
padding: calc(76px + 7vh) 8vw 7vh;
background: var(--legacy-color-hex-ffffff);
border: 0;
box-shadow: none;
}
.projector-panel__question-card--expanded::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 76px;
background: var(--legacy-color-hex-ff9514);
}
.projector-panel__question-card--expanded .projector-panel__card-fullscreen {
position: fixed;
top: 13px;
right: 18px;
z-index: 2;
width: 50px;
height: 50px;
color: var(--legacy-color-hex-ffffff);
}
.projector-panel__question-card--expanded .projector-panel__card-fullscreen i {
color: var(--legacy-color-hex-ffffff);
font-size: 36px;
}
.projector-panel__question-card--expanded .projector-panel__vote-count strong {
font-size: clamp(2.2rem, 4vw, 5.5rem);
}
.projector-panel__question-card--expanded .projector-panel__vote-count span {
font-size: clamp(1.2rem, 1.5vw, 2rem);
}
.projector-panel__question-card--expanded p {
flex: 0 0 auto;
font-size: clamp(2.35rem, 3.8vw, 5.5rem);
line-height: 1.16;
}
.projector-panel__question-card--expanded .projector-panel__question-asker {
gap: 18px;
padding-top: 30px;
border-top-color: var(--legacy-color-hex-d1d1d1);
font-size: clamp(1.25rem, 1.6vw, 2.3rem);
}
.projector-panel__question-card--expanded .projector-panel__question-asker i {
font-size: clamp(1.7rem, 2.2vw, 3.2rem);
}
.projector-panel__empty {
flex: 1;
min-height: 0;
display: grid;
place-content: center;
padding: 34px;
background: var(--legacy-color-hex-ffffff);
text-align: center;
}
.projector-panel__empty--compact {
min-height: 170px;
flex: 0 0 auto;
border: 1px solid var(--legacy-color-hex-ececec);
border-radius: 5px;
background: var(--legacy-color-hex-fafafa);
}
.projector-panel__empty h3 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
}
.projector-panel__empty p {
max-width: 560px;
margin: 10px auto 0;
color: var(--legacy-color-hex-68727d);
font-size: var(--fs-medium);
}
.projector-panel__notice {
padding: 12px 14px;
border-radius: 5px;
background: var(--legacy-color-hex-fff7ed);
color: var(--legacy-color-hex-9a4b05);
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
}
.projector-panel__fullscreen {
position: fixed;
right: 48px;
bottom: 22px;
z-index: 20;
min-width: 169px;
border: 1px solid var(--legacy-color-hex-ffb457);
background: var(--legacy-color-hex-ffb457);
color: var(--legacy-color-hex-ffffff);
}
@media (max-width: 1100px) {
.projector-panel {
grid-template-rows: 94px minmax(0, 1fr);
}
.projector-panel__header {
grid-template-columns: 150px 1fr 170px;
}
.projector-panel__workspace {
margin-top: -150px;
padding-inline: 16px;
}
.projector-panel__surface {
width: 100%;
min-width: 0;
height: calc(100vh - 128px);
}
.projector-panel__question-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media (max-width: 760px) {
.projector-panel {
grid-template-rows: 94px minmax(0, 1fr);
}
.projector-panel__header {
grid-template-columns: 1fr;
justify-items: center;
gap: 8px;
padding: 16px 16px 18px;
}
.projector-panel__logo,
.projector-panel__back {
justify-self: center;
}
.projector-panel__surface-head,
.projector-panel__qanda-header {
flex-direction: column;
}
.projector-panel__features,
.projector-panel__question-grid {
grid-template-columns: 1fr;
}
.projector-panel__question-card {
min-height: 250px;
}
.projector-panel__fullscreen {
right: 16px;
bottom: 16px;
}
}
/* Moderator and projector poll results */
.moderator-panel__poll,
.projector-panel__poll {
min-height: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.moderator-panel--poll-screen .moderator-panel__poll {
gap: 24px;
}
.moderator-panel--poll-screen .moderator-panel__qanda-header h3 {
font-size: var(--fs-3xl);
}
.moderator-panel__poll-card,
.projector-panel__poll-card {
position: relative;
min-height: 430px;
display: flex;
flex-direction: column;
gap: 22px;
padding: 28px;
border: 1px solid var(--legacy-color-hex-ececec);
border-radius: 5px;
background: var(--legacy-color-hex-ffffff);
color: var(--legacy-color-hex-252f3a);
}
.moderator-panel__poll-card,
.projector-panel__poll-card {
min-height: min(620px, calc(100vh - 265px));
padding: 42px 54px 46px;
border: 0;
}
.moderator-panel__poll-card-head,
.projector-panel__poll-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--legacy-color-hex-e3e3e3);
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-small);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.moderator-panel__poll-card-head strong,
.projector-panel__poll-card-head strong {
color: var(--legacy-color-hex-ff9514);
font-size: var(--fs-medium);
}
.moderator-panel__poll-card h3,
.projector-panel__poll-card h3 {
margin: 0;
color: var(--legacy-color-hex-17202a);
font-size: clamp(1.4rem, 1.2rem + 0.5vw, 2rem);
font-weight: var(--fw-extrabold);
line-height: 1.28;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.moderator-panel__poll-card h3,
.projector-panel__poll-card h3 {
max-width: 1120px;
font-size: clamp(2rem, 1.4rem + 1.9vw, 4.2rem);
line-height: 1.15;
}
.moderator-panel__poll-results,
.projector-panel__poll-results {
display: grid;
gap: 18px;
}
.moderator-panel__poll-results,
.projector-panel__poll-results {
gap: 24px;
}
.moderator-panel__poll-answer,
.projector-panel__poll-answer {
display: grid;
gap: 9px;
}
.moderator-panel__poll-answer-head,
.projector-panel__poll-answer-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 18px;
color: var(--legacy-color-hex-252f3a);
}
.moderator-panel__poll-answer-head > span:first-child,
.projector-panel__poll-answer-head > span:first-child {
min-width: 0;
font-size: var(--fs-medium);
font-weight: var(--fw-extrabold);
overflow-wrap: anywhere;
}
.moderator-panel__poll-answer-head > span:first-child,
.projector-panel__poll-answer-head > span:first-child {
font-size: clamp(1.25rem, 1rem + 0.8vw, 2rem);
}
.moderator-panel__poll-answer-head > span:last-child,
.projector-panel__poll-answer-head > span:last-child {
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
gap: 6px;
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-small);
font-weight: var(--fw-bold);
white-space: nowrap;
}
.moderator-panel__poll-answer-head > span:last-child,
.projector-panel__poll-answer-head > span:last-child {
font-size: clamp(1rem, 0.85rem + 0.45vw, 1.45rem);
}
.moderator-panel__poll-answer-head strong,
.projector-panel__poll-answer-head strong {
color: var(--legacy-color-hex-17202a);
font-weight: var(--fw-extrabold);
}
.moderator-panel__poll-answer-head strong:last-child,
.projector-panel__poll-answer-head strong:last-child {
color: var(--legacy-color-hex-ff9514);
margin-left: 8px;
}
.moderator-panel__poll-bar-track,
.projector-panel__poll-bar-track {
width: 100%;
height: 18px;
overflow: hidden;
border-radius: 999px;
background: var(--legacy-color-hex-eeeeee);
}
.moderator-panel__poll-bar-track,
.projector-panel__poll-bar-track {
height: 30px;
}
.moderator-panel__poll-bar-fill,
.projector-panel__poll-bar-fill {
height: 100%;
min-width: 3px;
border-radius: inherit;
background: var(--legacy-color-hex-ff9514);
transition: width 180ms ease;
}
.moderator-panel__poll-nav,
.projector-panel__poll-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.moderator-panel__poll-nav > span,
.projector-panel__poll-nav > span {
min-width: 72px;
color: var(--legacy-color-hex-7a838d);
font-size: var(--fs-small);
font-weight: var(--fw-extrabold);
text-align: center;
}
.moderator-panel__poll-nav .moderator-panel__ghost-button:disabled,
.projector-panel__poll-nav .projector-panel__ghost-button:disabled {
border-color: var(--legacy-color-hex-e1e4e8);
background: var(--legacy-color-hex-f2f3f4);
color: var(--legacy-color-hex-9aa3ad);
cursor: not-allowed;
opacity: 1;
box-shadow: none;
}
.moderator-panel__poll-nav .moderator-panel__ghost-button:disabled i,
.projector-panel__poll-nav .projector-panel__ghost-button:disabled i {
color: inherit;
}
.moderator-panel__poll-card:fullscreen,
.projector-panel__poll-card:fullscreen {
width: 100vw;
height: 100vh;
justify-content: center;
padding: 7vh 8vw;
background: var(--legacy-color-hex-ffffff);
}
.moderator-panel__poll-card:fullscreen .moderator-panel__card-fullscreen,
.projector-panel__poll-card:fullscreen .projector-panel__card-fullscreen {
top: 32px;
right: 32px;
}
.projector-panel__poll-card:fullscreen h3 {
font-size: clamp(3rem, 5vw, 7rem);
}
.projector-panel__poll-card:fullscreen .projector-panel__poll-answer-head > span:first-child {
font-size: clamp(1.8rem, 2.6vw, 3.6rem);
}
.projector-panel__poll-card:fullscreen .projector-panel__poll-answer-head > span:last-child {
font-size: clamp(1.4rem, 1.8vw, 2.6rem);
}
.projector-panel__poll-card:fullscreen .projector-panel__poll-bar-track {
height: clamp(34px, 4vh, 64px);
}
.azure-form-grid {
display: grid;
grid-template-columns: minmax(180px, 260px) minmax(0, 900px);
gap: 14px 18px;
align-items: start;
}
/*.azure-form-grid .form-label {
margin: 7px 0 0;
color: var(--legacy-color-hex-323130);
font-weight: 600;
}*/
.azure-field-validation-message {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 6px;
color: var(--azure-validation-color);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
.azure-field-validation-message i {
color: var(--azure-validation-color);
font-size: 14px;
line-height: 1.4;
margin-top: 2px;
flex: 0 0 auto;
}
input.form-control.is-invalid,
textarea.form-control.is-invalid,
.form-control.is-invalid,
.was-validated input.form-control:invalid,
.was-validated textarea.form-control:invalid,
.was-validated .form-control:invalid {
background-image: none !important;
background-position: initial !important;
background-repeat: initial !important;
background-size: initial !important;
border-color: var(--azure-validation-color);
padding-right: 0.75rem !important;
}
.form-select.is-invalid,
.was-validated .form-select:invalid {
--bs-form-select-bg-icon: none;
background-image: var(--form-select-caret-icon) !important;
background-position: right 0.75rem center !important;
background-size: 16px 12px !important;
border-color: var(--azure-validation-color);
padding-right: 2.25rem;
}
.review-validation-alert {
max-width: 100%;
}
.review-grid {
display: grid;
grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
gap: 12px 18px;
max-width: 920px;
}
.review-grid > span,
.review-grid > strong {
font-size: var(--fs-small);
font-weight: var(--fw-regular) !important;
line-height: 1.45;
}
.review-grid > span {
color: var(--body-color);
}
.review-grid > strong,
.review-grid strong {
color: var(--review-strong-color);
font-size: var(--fs-small);
font-weight: var(--fw-regular) !important;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.moderator-panel__poll-card,
.projector-panel__poll-card {
min-height: 360px;
padding: 22px;
}
.moderator-panel__poll-card-head,
.projector-panel__poll-card-head,
.moderator-panel__poll-answer-head,
.projector-panel__poll-answer-head {
grid-template-columns: 1fr;
}
.moderator-panel__poll-answer-head > span:last-child,
.projector-panel__poll-answer-head > span:last-child {
justify-content: flex-start;
flex-wrap: wrap;
white-space: normal;
}
.moderator-panel__poll-nav,
.projector-panel__poll-nav {
flex-wrap: wrap;
}
}
@media (max-width: 767.98px) {
.azure-form-grid,
.review-grid {
grid-template-columns: 1fr;
gap: 6px 0;
}
.azure-form-grid .form-label {
margin-top: 10px;
}
}