: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;
--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");
/*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: 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(--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); /* 60% specific colour overlay = 40% visible image */
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;
flex: 1 1 0;
min-height: 0;
/*overflow: hidden !important;*/
}
/* Pagination Footer */
.form-pagination {
position: sticky;
bottom: 0;
background: var(--color-bg-surface);
padding: 12px 20px;
/* border-top: 1px solid var(--color-border-default);*/
display: flex;
justify-content: start;
align-items: center;
}
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-lg, span.title-lg,
p.title-md, span.title-md,
p.title-md {
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, span.title-lg {
font-size: var(--fs-2xl);
}
/*p.title-md {
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;
cursor: pointer !important;
}
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;
cursor: pointer !important;
}
.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(--color-static-white) !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-md {
padding: .25rem 1.25rem !important;
font-weight: 500 !important;
display: flex;
align-items: center;
}
.btn-subtle-md:hover {
background-color: var(--color-bg-subtle) !important;
border-radius: 0px !important;
}
.btn-subtle-sm {
color: var(--primary-color);
padding: 0rem !important;
font-weight: 500 !important;
display: flex;
align-items: center;
border-radius: 0px !important;
}
.btn-subtle-sm:hover {
color: var(--primary-color);
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(--color-border-default) !important;
}
.table-action-button-loader {
display: inline-flex;
height: 20px;
width: 20px;
}
.table-action-button-loader svg {
display: block;
}
.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(--color-border-default) !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(--color-border-default) !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(--color-border-default) !important;
color: var(--secondary-color) !important;
}
.btn-secondary-lg:hover {
background-color: var(--secondary-bg) !important;
border: 1px solid var(--color-border-default) !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(--color-static-white) !important;
}
.btn-danger {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--danger-color) !important;
border-color: none !important;
color: var(--color-static-white) !important;
}
.btn-warning {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--warning-color) !important;
border-color: none !important;
color: var(--color-static-white) !important;
}
.btn-info {
/*padding: 0.5rem !important;*/
padding: .25rem 1.25rem !important;
background-color: var(--info-color) !important;
border-color: none !important;
color: var(--color-static-white) !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(--color-border-default) !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(--color-border-default) !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(--nav-bg) !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;
}
.sidebar {
flex-grow: 0;
flex-shrink: 0;
padding: 0px;
}
#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(--color-border-default) !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 {
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-toggle::after {
margin-left: 0.5rem !important;
}
.dropdown-menu .dropdown-item:hover {
background-color: var(--surface-neutral-hover);
color: var(--body-color) !important;
/* color: var(--color-text-primary);*/
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);
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-language__current {
background: var(--theme-dark-preview-bg);
border-color: var(--theme-dark-preview-border);
color: var(--theme-dark-preview-text);
min-width: 44px;
}
.avatar-dropdown-menu .avatar-language__trigger:hover .avatar-language__current,
.avatar-dropdown-menu .avatar-language__trigger:focus .avatar-language__current,
.avatar-dropdown-menu .avatar-language__trigger[aria-expanded="true"] .avatar-language__current {
background: var(--theme-dark-preview-bg);
border-color: var(--theme-dark-preview-border);
color: var(--theme-dark-preview-text);
}
.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 {
box-shadow: var(--shadow-offcanvas);
border: none !important;
color: var(--body-color);
background-color: var(--color-bg-surface);
}
.offcanvas-header {
padding: 1rem 1rem 0rem !important;
}
.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;
}
/* 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: auto !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;
}
/*---Accordions---*/
.accordion-button {
box-shadow: none !important;
}
.accordion-item:first-of-type .accordion-button:hover {
color: var(--body-color) !important;
background-color: var(--tertiary-bg) !important;
}
.accordion-button:hover {
color: var(--body-color) !important;
background-color: var(--tertiary-bg) !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-top: none;
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) {
color: var(--body-color) !important;
background-color: transparent !important;
border-bottom: 0;
}
.accordion-body {
background-color: transparent;
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: inline-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;
}
/*--- 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(--dark-text-emphasis) !important;
}
input.form-control::placeholder {
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
}
/*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.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.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: calc(1.5em + .5rem + 2px);
min-height: calc(1.5em + .5rem + 2px);
padding: 0 !important;
font-size: var(--fs-small) !important;
line-height: 1.5;
}
input.form-control[type="file"]::file-selector-button {
height: calc(1.5em + .5rem);
padding: 0 .5rem;
margin: 0 .5rem 0 0;
border: 0;
border-right: 1px solid var(--color-border-input);
}
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 {
border: 1px solid var(--color-border-default) !important;
border-radius: 0.5rem !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(--color-focus-ring); /* Icon color */
}
/*---Wizard---*/
.wizard,
.wizard .step-icon {
position: relative;
}
.wizard .step-icon {
width: 42px;
height: 42px;
margin-bottom: 10px;
background: var(--color-static-white);
border: 2px solid var(--color-border-control);
color: var(--color-border-control);
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(--color-focus-ring);
color: var(--color-focus-ring);
/*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-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(--color-border-default);
}
.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(--color-border-default);
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(--surface-chart-overlay);
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 {
padding: .875rem 1rem !important;
margin: 0 !important;
border: 1px solid var(--border-color) !important;
}
.cms-dashboard-overview-card {
display: flex;
flex-direction: column;
height: 100%;
}
.cms-dashboard-empty-message {
align-items: center;
display: flex;
flex: 1 1 auto;
justify-content: center;
text-align: center;
}
.cms-dashboard-metric-grid {
align-items: stretch;
display: grid;
gap: 1rem .75rem;
}
.cms-dashboard-metric-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.cms-dashboard-metric-grid--ticket-types {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cms-dashboard-metric-cell {
min-width: 0;
}
.cms-dashboard-metric-label {
overflow-wrap: anywhere;
word-break: normal;
}
@media (max-width: 1399.98px) {
.cms-dashboard-metric-grid--ticket-types {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.cms-dashboard-metric-grid--ticket-types {
grid-template-columns: 1fr;
}
}
.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(--color-border-default) !important;
box-shadow: var(--shadow-card) !important;
min-height: 154px !important;
}
.custom-card:hover {
background-color: var(--primary-bg-subtle) !important;
box-shadow: var(--shadow-card-strong) !important;
}
/*---Pagination--*/
nav .pagination {
font-size: var(--fs-medium) !important;
font-weight: var(--fw-medium) !important;
border: 1px solid var(--color-border-default) !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(--footer-bg);
color: var(--color-static-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 {
padding: 12px;
display: flex;
flex-direction: column;
}
.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);
border-radius: 0px;
box-shadow: var(--shadow-dropdown);
border: none;
animation: fadeIn 0.3s ease-in-out;
}
#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(--color-border-default);
border-radius: 6px;
background: var(--file-display-bg);
}
.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: var(--shadow-panel);
}
/* 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(--color-focus-ring) !important;
border-radius: .25rem;
}
/* Highlight selected date */
.datepicker .datepicker-days td.today, .datepicker .datepicker-days td.focused {
background-color: var(--success-text-emphasis);
color: var(--color-static-white);
border-radius: .25rem;
}
/* Adjust the footer of the datepicker if using a footer */
.datepicker .datepicker-footer {
padding: 10px;
background-color: var(--color-bg-muted);
border-top: 1px solid var(--color-border-subtle);
text-align: center;
}
}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
background: var(--color-bg-subtle) !important;
color: var(--color-text-muted);
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(--color-bg-subtle) !important;
cursor: pointer;
}
/* Disable days */
.datepicker .datepicker-days td.disabled {
background-color: var(--color-bg-subtle) !important;
color: var(--color-border-control);
}
/* Styling for the selected day */
.datepicker .datepicker-days td.selected {
background-color: var(--color-focus-ring);
color: var(--color-static-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(--color-brand-microsoft) !important;
color: var(--color-static-white) !important;
}
/*global-loading-css*/
.global-loading-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--body-bg);
display: grid;
place-items: center;
}
.cms-reorder-row {
cursor: default !important;
user-select: none;
-webkit-user-select: none;
}
.cms-reorder-active,
.cms-reorder-active * {
user-select: none !important;
-webkit-user-select: none !important;
}
.cms-reorder-row > *,
.cms-reorder-row * {
user-select: none;
-webkit-user-select: none;
}
.cms-reorder-row:active {
cursor: grabbing !important;
}
.cms-reorder-row--dragging,
.cms-reorder-row--dragging > * {
opacity: 0.58;
}
.cms-reorder-row--chosen,
.cms-reorder-row--chosen > * {
cursor: grabbing !important;
}
.cms-reorder-row--ghost,
.cms-reorder-row--ghost > * {
--bs-table-bg: var(--primary-bg-muted);
background-color: var(--primary-bg-muted) !important;
opacity: 0.72;
}
.cms-reorder-row--drop-target,
.cms-reorder-row--drop-target > * {
--bs-table-bg: var(--primary-bg-muted);
background-color: var(--primary-bg-muted) !important;
box-shadow: inset 0 2px 0 var(--primary-color), inset 0 -2px 0 var(--primary-color);
}
.cms-reorder-grip {
color: var(--color-text-muted);
cursor: grab;
display: inline-flex;
font-size: 1rem;
line-height: 1;
}
.asset-upload-status {
color: var(--color-text-muted);
font-size: 13px;
margin-top: 6px;
overflow-wrap: anywhere;
}
.consent-upload-button,
.sponsor-attachment-upload-button {
align-items: center;
background: linear-gradient(110deg, var(--color-bg-surface), var(--color-bg-muted));
border: 1px dashed var(--color-border-control);
border-radius: 8px;
color: var(--body-color);
cursor: pointer;
display: flex;
flex-direction: column;
font: inherit;
gap: 2px;
justify-content: center;
min-height: 84px;
padding: 14px 18px;
text-align: center;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
width: 100%;
}
.consent-upload-button:hover,
.consent-upload-button:focus,
.consent-upload-button.is-dragover,
.sponsor-attachment-upload-button:hover,
.sponsor-attachment-upload-button:focus,
.sponsor-attachment-upload-button.is-dragover {
background: var(--color-bg-subtle);
border-color: var(--color-text-muted);
}
.consent-upload-button.is-invalid,
.sponsor-attachment-upload-button.is-invalid {
border-color: var(--danger-text-emphasis);
}
.consent-upload-button:disabled,
.sponsor-attachment-upload-button:disabled {
background: var(--surface-disabled);
cursor: not-allowed;
opacity: .65;
}
.consent-upload-button:disabled:hover,
.consent-upload-button:disabled:focus,
.sponsor-attachment-upload-button:disabled:hover,
.sponsor-attachment-upload-button:disabled:focus {
background: var(--surface-disabled);
cursor: not-allowed;
}
.pdf-upload-dropzone-icon {
align-items: center;
color: var(--color-text-muted);
display: inline-flex;
font-size: 16px;
justify-content: center;
line-height: 1;
}
.pdf-upload-dropzone-title {
color: var(--body-color);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
line-height: 1.35;
}
.pdf-upload-dropzone-hint {
color: var(--color-text-muted);
font-size: 11px;
line-height: 1.3;
}
.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 {
background-color: var(--surface-control-bg) !important;
border-color: var(--border-color) !important;
color: var(--body-color) !important;
}
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(--color-border-input);*/ /* 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;
}
.azure-form-grid {
display: grid;
grid-template-columns: minmax(180px, 260px) minmax(0, 900px);
gap: 14px 18px;
align-items: start;
}
.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 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;
}
.cms-table-cell-link {
background: transparent;
border: 0;
color: inherit;
font: inherit;
padding: 0;
text-align: left;
text-decoration: none;
overflow-wrap: anywhere;
}
.cms-table-cell-link:hover,
.cms-table-cell-link:focus {
color: var(--primary-color);
text-decoration: underline;
}
@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;
}
}